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 相关文章推荐
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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数据流应用的一个简单实例
2012/09/14 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python计算信息熵实例
2020/06/18 Python
饮料业务员岗位职责
2013/12/15 职场文书
yy司仪主持词
2014/03/22 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python