javascript - How to call the width and height of the read remote image
怪我咯
怪我咯 2017-05-18 10:57:30
0
2
427

I want to call the width and height of this image outside the function. How should I write it?
I've been stuck for three days and have no clue.

    // 更新:
    // 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;

    })

This kind of pop-up width and height is possible, but how to call this width and height.
Your few codes can save me a lot of time, thank you very much

怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(2)
黄舟

Callback

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;

    })

I don’t know if I understand it correctly

过去多啦不再A梦

It seems that this problem cannot be solved. This image reading function is somewhat similar to the asynchronous ajax, and its assignment is executed later

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template