cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Bagaimana untuk memanggil lebar dan ketinggian imej jauh yang dibaca

Saya ingin memanggil lebar dan tinggi imej ini di luar fungsi Bagaimana saya harus menulisnya?
Saya telah terperangkap selama tiga hari dan tidak tahu.

    // 更新:
    // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
    // 04-02: 1、增加图片完全加载后的回调 2、提高性能

    /**
     * 图片头数据加载就绪事件 - 更快获取图片尺寸
     *
     * 原理:没有缓存的情况下,用计时器不断验证图片的大小是否发生变化,如果不在变化则为ready
     *       如果有缓存则w3c浏览器会调用 complete,ie则会走 onload,都不在走 计时器那部分
     *
     * @version    2011.05.27
     * @author    TangBin
     * @see        http://www.planeart.cn/?p=1121
     * @param    {String}    图片路径
     * @param    {Function}    尺寸就绪
     * @param    {Function}    加载完毕 (可选)
     * @param    {Function}    加载错误 (可选)
     * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
     */
    var imgReady = (function () {
        var list = [], intervalId = null,

            // 用来执行队列
            tick = function () {
                var i = 0;
                for (; i < list.length; i++) {
                    list[i].end ? list.splice(i--, 1) : list[i]();
                }
                ;
                !list.length && stop();
            },

            // 停止所有定时器队列
            stop = function () {
                clearInterval(intervalId);
                intervalId = null;
            };

        return function (url, ready, load, error) {
            var onready, width, height, newWidth, newHeight,
                img = new Image();

            img.src = url;

            // 如果图片被缓存,则直接返回缓存数据
            if (img.complete) {
                ready.call(img);
                load && load.call(img);
                return;
            }
            ;

            width = img.width;
            height = img.height;

            // 加载错误后的事件
            img.onerror = function () {
                error && error.call(img);
                onready.end = true;
                img = img.onload = img.onerror = null;
            };

            // 图片尺寸就绪
            onready = function () {
                newWidth = img.width;
                newHeight = img.height;
                if (newWidth !== width || newHeight !== height ||
                    // 如果图片已经在其他地方加载可使用面积检测
                    newWidth * newHeight > 1024
                    ) {
                    ready.call(img);
                    onready.end = true;
                }
                ;
            };
            onready();

            // 完全加载完毕的事件
            img.onload = function () {
                 // onload在定时器时间差范围内可能比onready快
                // 这里进行检查并保证onready优先执行
                !onready.end && onready();

                load && load.call(img);

                // IE gif动画会循环执行onload,置空onload即可
                img = img.onload = img.onerror = null;
            };

                // 加入队列中定期执行
            if (!onready.end) {
                list.push(onready);
                // 无论何时只允许出现一个定时器,减少浏览器性能损耗
                if (intervalId === null) intervalId = setInterval(tick, 40);
            }
            ;
        };
    })();
    var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
    imgReady(img_url, function () {
        alert(this.width + '\n' + this.height);
        document.getElementById('song').src = img_url;

    })

Lebar dan ketinggian pop timbul ini boleh dilakukan, tetapi bagaimana untuk memanggil lebar dan tinggi ini.
Sedikit kod anda boleh menjimatkan banyak masa saya, terima kasih banyak-banyak

怪我咯怪我咯2778 hari yang lalu447

membalas semua(2)saya akan balas

  • 黄舟

    黄舟2017-05-18 10:59:30

    panggilan balik

    function yourFun(width,height){
        console.log(width,height)
    }
    var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
        imgReady(img_url, function () {
            yourFun(this.width , this.height);
            document.getElementById('song').src = img_url;
    
        })

    Saya tidak tahu sama ada saya faham betul

    balas
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-18 10:59:30

    Nampaknya masalah ini tidak dapat diselesaikan fungsi membaca imej ini agak serupa dengan ajax tak segerak dilaksanakan kemudian

    .

    balas
    0
  • Batalbalas