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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery 指南/入门基础
Nov 30 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 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
PHP防注入安全代码
2008/04/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php抽象类用法实例分析
2015/07/07 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python def 定义函数,调用函数方式
2020/06/02 Python
几款好用的python工具库(小结)
2020/10/20 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
大学军训感言1500字
2014/03/09 职场文书
优质服务活动实施方案
2014/05/02 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python