JS中通过url动态获取图片大小的方法小结(两种方法)


Posted in Javascript onOctober 31, 2018

很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放。

查阅资料,我总结了两种通过url获取图片大小的方法:

1.预加载获取图片大小

var imgLoad = function (url, callback) {
  var img = new Image();
  img.src = url;
  if (img.complete) {
    callback(img.width, img.height);
  } else {
    img.onload = function () {
      callback(img.width, img.height);
      img.onload = null;
    };
  };
};

此方法必须等待图片加载完毕才能获取尺寸,速度超慢,图片会先出现原本大小,一段时间后才进行缩放,体验差

2.封装的方法imgReady

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('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
});

方法二体验下好很多,速度也很快,建议使用。

总结

以上所述是小编给大家介绍的JS中通过url动态获取图片大小的方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
纯JS代码实现气泡效果
May 04 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
python 从csv读数据到mysql的实例
2018/06/21 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python制作填词游戏步骤详解
2019/05/05 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python多线程使用方法实例详解
2019/12/30 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
房地产项目建议书
2014/03/12 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
平面设计专业求职信
2014/08/09 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
离婚协议书怎么写
2015/01/26 职场文书
投资合作意向书范本
2015/05/08 职场文书
付款证明模板
2015/06/19 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers