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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vue elementUI批量上传文件
Apr 26 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
使用python实现个性化词云的方法
2017/06/16 Python
浅谈Django REST Framework限速
2017/12/12 Python
关于python中的xpath解析定位
2020/03/06 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
护理专业推荐信
2013/11/07 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
安全生产管理责任书
2014/04/16 职场文书
大学生实习证明范本
2014/09/19 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年党务工作总结
2014/11/25 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
PHP使用QR Code生成二维码实例
2021/07/07 PHP