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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
JavaScript小技巧整理
Dec 30 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
Vue实现手机计算器
Aug 17 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
音乐教学反思
2014/02/02 职场文书
优秀求职信
2014/05/29 职场文书
健康状况证明模板
2014/10/23 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
图书馆义工感想
2015/08/07 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript
MySQL主从切换的超详细步骤
2022/06/28 MySQL