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 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
基于vue的video播放器的实现示例
Feb 19 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
JavaScript错误处理
2015/02/03 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
python框架django项目部署相关知识详解
2019/11/04 Python
python实现人工蜂群算法
2020/09/18 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
装修设计师求职信
2014/02/26 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
酒店温馨提示语
2015/07/14 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Python中第三方库Faker的使用详解
2022/04/02 Python