服务网络

我们的服务遍布中国且触达海外
中国
北京、上海、广州、深圳、潍坊、南京、杭州、苏州、天津、济南、青岛、武汉、福州、吉林、济宁、滨州、嘉兴、宁波、临沂、常州、池州、香港、台湾...
海外
美国、英国、德国、日本、意大利、新加坡、波兰、俄罗斯、阿拉伯、西班牙、韩国、法国、澳大利亚...

合作咨询

134-0536-2733

请通过表单提交合作咨询信息,我们会尽快与您取得联系。
搜索
首页 > 新闻 > 技术专题 谈javascript图片预加载技术
2011/3/11 9:54:00
谈javascript图片预加载技术

由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让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定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码:

var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;

img.src = url;

// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};

// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;

check = function () {
if (img.offsetWidth !== width img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};

intervalId = setInterval(check, 150);
};

// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

};

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了,请观赏令人愉悦的 DEMO ,通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。

相关新闻

让品牌互动触手可及
我们以跨领域的嗅觉与您一起创造奇迹

关闭

Rosion
的专业顾问会及时与您沟通...
您也可直接拨打:

134 0536 2733

您的姓名: *

公司名称: *

联系方式: *

您的需求:

留言:

立即咨询了解您想要的解决方案
多份参考 总有益处
扫码咨询