图片获取宽高以及调用,预加载设置

点击加载不同宽高的图片,显示实际宽高,自己写了发现没有效果,宽高统一为占位图片的宽高,并没有实际获取到,百度保存下大牛的代码作为参考
代码:

 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);
          };
        };
      })();

调用:

imgReady(url,function(){
    //this.height
    //this.weight
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值