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 相关文章推荐
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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/03 日漫
Yii核心验证器api详解
2016/11/23 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JavaScript 数组详解
2013/10/10 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python日志syslog使用原理详解
2020/02/18 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
中学学校门卫岗位职责
2014/08/15 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
工作简报范文
2015/07/21 职场文书
python实现A*寻路算法
2021/06/13 Python
Pandas数据类型之category的用法
2021/06/28 Python