再谈javascript图片预加载技术

  • 时间:
  • 浏览:1
  • 来源:5分快乐8_5分快乐8平台_5分快乐8网投平台

有以后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, 1150);



};

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普通(1150×1500内)浏览级别的图片能达到秒杀效果。

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

(planeArt.cn原创文章,原文地址。)

有好的文章希望站长之家帮助分享推广,猛戳这里我都要投稿