再谈javascript图片预加载技术(详细演示)

而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。

一段典型的使用预加载获取图片大小的例子:


代码如下:

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;
};
};
};

可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码(2011-03-11更新):
2011-03-12 更新:
只使用一定时器,优化性能


代码如下:

/*!
* img ready v0.3
* http://www.planeart.cn/?p=1121
* TangBin - MIT Licensed
*/
// 图片头数据加载就绪事件
// @param {String} 图片路径
// @param {Function} 获取尺寸的回调函数 (参数1接收width;参数2接收height)
// @param {Function} 加载错误的回调函数 (可选)
(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;
};
this.imgReady = function (url, callback, error) {
var check, end, width, height, offsetWidth, offsetHeight, div,
accuracy = 1024,
doc = document,
container = doc.body || doc.getElementsByTagName('head')[0],
img = new Image();
img.src = url;
if (!callback) return img;
// 如果图片被缓存,则直接返回缓存数据
if (img.complete) return callback(img.width, img.height);
// 向页面插入隐秘图像,用来监听图片是否占位
div = doc.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
container.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
// 完全加载完毕的事件
img.onload = function () {
end();
callback(img.width, img.height);
};
// 加载错误后的事件
img.onerror = function () {
end();
error && error();
};
// 检测图片是否已经占位
check = function () {
offsetWidth = img.offsetWidth;
offsetHeight = img.offsetHeight;
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {
end();
callback(offsetWidth, offsetHeight);
};
};
check.url = url;
// 操作结束后进行清理
// 删除元素与事件,避免IE内存泄漏
end = function () {
check.end = true;
img.onload = img.onerror = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
// 将检测图片是否占位的函数加入定时器列队定期执行
// 同一图片只加入一个检测器
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
!check.end && check();
for (var i = 0; i < list.length; i ++) {
if (list[i].url === url) return;
};
if (!check.end) {
list.push(check);
if (!intervalId) intervalId = setInterval(tick, 150);
};
};
})();

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。
好了,请观赏令人愉悦的 DEMO : http://demo.jb51.net/js/2011/imgready/
(通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)
来自:: 唐斌

(0)

相关推荐

  • js图片预加载示例

    js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

  • JavaScript模仿Pinterest实现图片预加载功能

    前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会

  • JS图片预加载 JS实现图片预加载应用

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 利用CSS、JavaScript及Ajax实现高效的图片预加载

    方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background:

  • js 利用image对象实现图片的预加载提高访问速度

    大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回

  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • javascript 也来玩玩图片预加载

    作者:编程浪子 最近玩图片预加载的人好像特别多,我也来一个,个人比较懒,只在IE上调试,大家就当无聊聊玩玩吧 IE图片预加载类 function LoadImageClass() { var me = this; var a = []; //图片数组 this.Idx = 0; //已经被加载的图片个数 this.Num = 0; //图片总数 //下载图片 this.LoadImages = function(s) { a = s.split(","); this.Num = a.l

  • javascript预加载图片、css、js的方法示例介绍

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -

  • 纯JS图片批量预加载技术代码

    图片批量加载 function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

随机推荐