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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
老生常谈的跨域处理
Jan 11 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
微信小程序实现留言功能
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
多重?l件?合查?(二)
2006/10/09 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue-rx的初步使用教程
2018/09/21 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python多线程编程简单介绍
2015/04/13 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
自我鉴定书
2014/03/24 职场文书
银行贷款委托书范本
2014/10/11 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
个人向公司借款协议书
2016/03/19 职场文书