国语自产精品视频在线看:您身边最放心的安全下载站! 最新软件|热门排行|软件分类|软件专题|厂商大全

国语自产精品视频在线看

技术教程
您的位置:首页网页设计网页特效 → javascript图片预加载技术

javascript图片预加载技术

我要评论 2011/03/15 09:55:50 来源:国语自产精品视频在线看 编辑:绿色资源站 [ ] 评论:0 点击:229次

由于javascript无法获【wú fǎ huò】取【qǔ】😮img文件头🍏数据🎶,必须等待其加载完毕【zǎi wán bì】🌁后才能获取【qǔ】真🚚实的大【shí de dà】小【xiǎo】,所以【suǒ yǐ】lightbox类效果为了让🎖图片居📲中显示🐹,导致其【dǎo zhì qí】速度体验要比直接输出的差🚄很多。而本文所提到的预加【de yù jiā】🚩载技术主要是【zhǔ yào shì】让🎖javascript快速获【kuài sù huò】取【qǔ】😮图片头【tú piàn tóu】部数据🎶的尺寸。

一段典型的使🎛用预加🏩载获取【zǎi huò qǔ】图片大【tú piàn dà】小的例【xiǎo de lì】🏷子:

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

};

可以看【kě yǐ kàn】🐥到使用💾onload的方式必须等待图片【dài tú piàn】加载完毕🚺,其速度不敢恭【bú gǎn gōng】维。

web应用程序【yòng chéng xù】⛄区别于桌面应用程序【yòng chéng xù】⛄,响应速度才是最好的用户体【yòng hù tǐ】验【yàn】。如果想要速度与优雅💭兼得【jiān dé】,那就必须提前【xū tí qián】📥获得图【huò dé tú】片尺♉寸【cùn】👡,如何在图片没😚有加载👺完毕就【wán bì jiù】能获取💭图片尺♉寸【cùn】👡?

十多年【shí duō nián】的上网【de shàng wǎng】经验告诉我:浏览器在加载🥡图片的【tú piàn de】时候你【shí hòu nǐ】🎣会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图【fèn de tú】片都是【piàn dōu shì】📤没有预【méi yǒu yù】设width与height属性的【shǔ xìng de】🖕,因为浏【yīn wéi liú】💋览器能够获取🕡图片的【tú piàn de】头部数🏞据【jù】。基于此🥝,只需要🦏使用💇javascript定时侦🌽测图片的【tú piàn de】尺寸🥫状态便可得知图片尺【tú piàn chǐ】寸就绪【cùn jiù xù】的状态。

实现代码:

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

// 通过占位提前获取图【huò qǔ tú】👢片头部➰数据【shù jù】
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);
};

// 加载完毕后方🚉式获取【shì huò qǔ】
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

// 图片加【tú piàn jiā】♓载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

};

是不是🙍很简单?这样的方式获取摄影级别照🌏片尺寸的速度🈸往往是onload方式的🎟几十多【jǐ shí duō】倍【bèi】,而对于web普通【pǔ tōng】(800×600内【nèi】)浏览级【liú lǎn jí】🦄别的图【bié de tú】片能达到秒杀🌞效果。

关键词:javascript

阅读本文后您有什么感想? 已有 人给出评价!

  • 0 欢迎喜欢
  • 0 白痴
  • 0 拜托
  • 0 哇
  • 0 加油
  • 0 鄙视