javascript順序加載圖片的方法
本文實(shí)例講述了javascript順序加載圖片的方法。分享給大家供大家參考。具體如下:
javascript監(jiān)聽(tīng)一個(gè)圖片是否加載完畢 如果加載完成再加載下一張,不是一次性從服務(wù)器加載 減少服務(wù)器壓力,
可用到的地方:比如制作類似google地圖的應(yīng)用,可以使小圖一張一張的加載
function Load_pic(arr){
this.loop_f=function(i,o_file,len,f,obj){
if(i<len-1){
i=i+1;
f(i,o_file,len,obj);
}
};
this.creat_pic=function(i,o_file,len,obj){
var f=arguments.callee,
doc=document,
image = doc.createElement("img");
image.src =o_file[i];
i<len?doc.getElementsByTagName("body")[0].appendChild(image):'';
if(navigator.userAgent.indexOf("MSIE")>0){
if($.browser.version==6.0 || $.browser.version==9.0){
//IE9和IE6一樣 微軟真是怪異
image.onreadystatechange = function () {
if (image.readyState == "complete"){
obj.loop_f(i,o_file,len,f,obj);
}
};
}else{
ie7imagetime = window.setInterval(function(){
var rs = image.readyState;
if(rs=="complete"){
window.clearInterval(ie7imagetime);
obj.loop_f(i,o_file,len,f,obj);
}else{
return;
}
},200);
}
}else{
image.onload = function () {
if (image.complete == true){
obj.loop_f(i,o_file,len,f,obj);
}
};
}
};
if(arr.constructor===Array){
var len=arr.length,
i=0;
i<len?this.creat_pic(i,arr,len,this):'';
};
}
//調(diào)用方法
new Load_pic([
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_3.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_3.gif'
]);
//注意要調(diào)用jquery 用于判斷瀏覽器
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 異步安全加載javascript文件的方法
- javascript圖片預(yù)加載實(shí)例分析
- 在JavaScript應(yīng)用中實(shí)現(xiàn)延遲加載的方法
- 關(guān)于延遲加載JavaScript
- JavaScript 動(dòng)態(tài)加載腳本和樣式的方法
- JavaScript動(dòng)態(tài)加載樣式表的方法
- javascript實(shí)現(xiàn)動(dòng)態(tài)加載CSS
- JavaScript異步加載淺析
- 關(guān)于Javascript加載執(zhí)行優(yōu)化的研究報(bào)告
- javascript文件加載管理簡(jiǎn)單實(shí)現(xiàn)方法
相關(guān)文章
js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場(chǎng)景簡(jiǎn)述
隨著web2.0的彪悍發(fā)展,以及瀏覽器端所承載的工作越來(lái)越大(在不是很影響性能的情況下,開(kāi)發(fā)者都習(xí)慣把能用瀏覽器做的事兒都讓瀏覽器做,以減輕服務(wù)器的壓力和帶寬費(fèi)用等)。2010-04-04
js實(shí)現(xiàn)類似jquery里animate動(dòng)畫(huà)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)類似jquery里animate動(dòng)畫(huà)效果的方法,實(shí)例分析了javascript模擬實(shí)現(xiàn)jQuery中animate動(dòng)畫(huà)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例
這篇文章主要給大家介紹了關(guān)于前端處理二進(jìn)制流文件導(dǎo)出為excel表的相關(guān)資料,后臺(tái)管理系統(tǒng),常會(huì)出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下2023-08-08
IE 上下滾動(dòng)展示模仿Marquee機(jī)制
最近要做一個(gè)大屏幕展示上下滾動(dòng)的列表,而IE自帶的Marquee,無(wú)法滿足需要,隨自己寫(xiě)了一個(gè)滾動(dòng)機(jī)制,代碼在附件中2009-12-12
JSChart輕量級(jí)圖形報(bào)表工具(內(nèi)置函數(shù)中文參考)
JSChart是一個(gè)輕量級(jí)的在線圖表生成工具,本身十分小巧,簡(jiǎn)單易用,相對(duì)來(lái)講功能也不是特別強(qiáng)大,但是對(duì)于一些要求不高的應(yīng)用來(lái)講已經(jīng)夠用了,最近兩天在做一個(gè)監(jiān)控系統(tǒng),想到了它。2010-10-10
JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
這篇文章主要介紹了JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
JS實(shí)現(xiàn)圖片無(wú)間斷滾動(dòng)代碼匯總
這篇文章主要介紹了JS實(shí)現(xiàn)圖片無(wú)間斷滾動(dòng)代碼匯總,非常實(shí)用的特效代碼,需要的朋友可以參考下2014-07-07
淺談在js傳遞參數(shù)中含加號(hào)(+)的處理方式
下面小編就為大家?guī)?lái)一篇淺談在js傳遞參數(shù)中含加號(hào)(+)的處理方式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10

