又一個(gè)小巧的圖片預(yù)加載類
更新時(shí)間:2007年05月05日 00:00:00 作者:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function LoadImage(arrSrc,callBack)
{
this.Length=arrSrc.length;
this.LoadedLen=0; //已經(jīng)被加載的圖片個(gè)數(shù)
var self=this;
if(self.Length<1)
{
callBack(arrSrc);
return;
}
//經(jīng)測試,OPERA與別的瀏覽器加載方式不同,所以特別獨(dú)立開來...
if(Opera)
{
for(var i=0;i<self.Length;i++)
{
var tmpImg=new Image();
tmpImg.src=arrSrc[i];
tmpImg.onload=function()
{
self.LoadedLen++;
if(self.LoadedLen==self.Length && callBack) callBack(arrSrc);
}
}
return;
}
this.Load=function()
{
self.LoadedLen++;
document.getElementById("counter").innerHTML=self.LoadedLen;
if(self.LoadedLen<self.Length) self.DownImg();
else if(callBack) callBack(arrSrc);
}
this.DownImg=function()
{
var tmpImg=new Image();
tmpImg.src=arrSrc[self.LoadedLen];
if(IE)
{
if(tmpImg.readyState=="complete") self.Load();
else tmpImg.onreadystatechange=function()
{
if(this.readyState=="complete") self.Load();
}
}
else tmpImg.onload=self.Load;
}
this.DownImg();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="counter"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arr=['http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg','http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg','http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'];
var t=new LoadImage(arr,function(arr)
{
var str="";
for(var i=0;i<arr.length;i++)
{
str+="<img src='"+arr[i]+"' /><br>";
}
document.body.innerHTML+=str;
});
//-->
</SCRIPT>
</BODY>
</HTML>
您可能感興趣的文章:
- javascript 也來玩玩圖片預(yù)加載
- jquery 圖片預(yù)加載 自動等比例縮放插件
- 再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)
- js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ,事件onload 異步加載圖片)
- jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
- JS圖片預(yù)加載 JS實(shí)現(xiàn)圖片預(yù)加載應(yīng)用
- JS實(shí)現(xiàn)圖片預(yù)加載無需等待
- js圖片預(yù)加載示例
- 實(shí)現(xiàn)圖片預(yù)加載的三大方法及優(yōu)缺點(diǎn)分析
相關(guān)文章
一個(gè)不錯(cuò)的給圖片添加說明文字的動態(tài)層的實(shí)現(xiàn)代碼
一個(gè)不錯(cuò)的給圖片添加說明文字的動態(tài)層的實(shí)現(xiàn)代碼,需要的朋友可以參考下2013-04-04JavaScript判斷圖片是否能夠加載,失敗則替換默認(rèn)圖片
JavaScript智能判斷圖片是否能夠正確加載,若加載失敗則用默認(rèn)圖片替換,這是個(gè)比較實(shí)用的功能,不少網(wǎng)站都可見到這種功能.2010-10-10發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來照顧一下博客吧,這里先把眼前就有的一個(gè)小東西拿出來和大家分享一下,這是2006年的時(shí)候(文本里記下了時(shí)間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07jQuery.lazyload+masonry改良圖片瀑布流代碼
這里主要是使用jQuery.lazyload配合masonry實(shí)現(xiàn)瀑布流的重新排列,有時(shí)候網(wǎng)站的速度慢,圖片加載慢,獲取不到圖片的寬度和高度,所以使用lazyload可以在圖片加載完之后,進(jìn)行瀑布流的重新排列。2014-06-06簡單的實(shí)現(xiàn)點(diǎn)擊箭頭圖片切換的js代碼
這個(gè)是一個(gè)簡單的點(diǎn)擊箭頭圖片切換的例子。JS部分采用過的是jQuery2012-11-11js實(shí)現(xiàn)圖片等比縮略顯示 支持IE/FF
js實(shí)現(xiàn)圖片等比縮略顯示 支持IE/FF...2007-02-02