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 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
js精确的加减乘除实例
Nov 14 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 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
星际原理概述
2020/03/04 星际争霸
php之字符串变相相减的代码
2007/03/19 PHP
php创建多级目录代码
2008/06/05 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php数组使用规则分析
2015/02/27 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
一个获取第n个元素节点的js函数
2014/09/02 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python NumPy库安装使用笔记
2015/05/18 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python编写Windows Service服务程序
2018/01/04 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
应届生服务员求职信
2013/10/31 职场文书
大学学风建设方案
2014/05/04 职场文书
redis实现排行榜功能
2021/05/24 Redis
mysql数据库如何转移到oracle
2022/12/24 MySQL