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 的一个progressbar widge
Oct 29 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
js数组去重的方法汇总
Jul 29 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php db类库进行数据库操作
2009/03/19 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
canvas绘制多边形
2017/02/24 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python的log日志功能及设置方法
2019/07/11 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
一般纳税人申请报告
2015/05/18 职场文书
死亡诗社观后感
2015/06/05 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
nginx优化的六点方法
2021/03/31 Servers
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript