img预加载获取图片大小方法

    // 更新：  // 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身  // 04-02: 1、增加图片完全加载后的回调 2、提高性能  /** * 图片头数据加载就绪事件 - 更快获取图片尺寸 * @version 2011.05.27 * @author TangBin * @see  http://www.planeart.cn/?p=1121 * @param {String} 图片路径 * @param {Function} 尺寸就绪 * @param {Function} 加载完毕 (可选) * @param {Function} 加载错误 (可选) * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); }); */  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);  })

img预加载获取图片大小方法相关推荐

图片预加载的三种方法
转载: 图片预加载的三个方法 - 浅夏初晴 - 博客园利用CSS.JavaScript及Ajax实现图片预加载的三大方法预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利 ...
图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
微信H5资源预加载（图片、字体）
一.背景微信活动H5页面的特点之一就是资源多(图.字体.音频等),动不动就几十兆.庞大的资源量很可能导致页面不流畅.如下图,因为背景图还没加载完,进入第二页时会有一瞬间"白屏". ...
Android 系统（167）----Glide加载圆角图片的方法
Glide加载圆角图片的方法现在在市面上很多App的UI设计都会出现圆角图片的显示.Glide本身也提供了圆角图片的加载方式.但是我们在开发中有可能遇到只要顶部展示圆角,或者某一个角是圆角.这样的需 ...
加载gif图片的方法：（需要SDWebImage方法）
#import "UIImage+GIF.h" 加载gif图片的方法:(需要SDWebImage方法) /** * 加载图片 */ - (void)initLoadingImag ...
android圆角glide,Glide加载圆角图片的方法
原标题:Glide加载圆角图片的方法现在在市面上很多App的UI设计都会出现圆角图片的显示.Glide本身也提供了圆角图片的加载方式.但是我们在开发中有可能遇到只要顶部展示圆角,或者某一个角是圆角. ...
图片预加载的三个方法
利用CSS.JavaScript及Ajax实现图片预加载的三大方法预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片 ...
html页面懒加载灰度图片大小,小程序初级指南--图片及其优化
图片格式开发中常见的图片格式有 GIF.PNG8.PNG24.JPEG.WEBP. 我们需要根据图片格式的特性和场景需要选取适合的图片格式,而不是设计给什么用什么. PNGPNG 的目的是替代GIF ...
预加载显示图片的艺术
一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样 ...

img预加载获取图片大小方法

img预加载获取图片大小方法相关推荐

最新文章

热门文章