快捷導(dǎo)航

JS圖片預(yù)加載 JS實(shí)現(xiàn)圖片預(yù)加載應(yīng)用

更新時(shí)間：2012年12月03日 16:06:59 作者：

由于圖片加載慢，導(dǎo)致用戶(hù)體驗(yàn)特別差，本文將介紹一種圖片預(yù)加載技術(shù)，需要了解的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js 實(shí)現(xiàn)圖片預(yù)加載 加載完后執(zhí)行動(dòng)作</title> 
</head> 
<style type="text/css"> 
<!-- 
*html{ 
margin:0; 
padding:0; 
border:0; 
} 
body{border:1px solid #f3f3f3; background:#fefefe} 
div#loading{ 
width:950px; 
height:265px; 
line-height:265px; 
overflow:hidden; 
position:relative; 
text-align:center; 
} 
div#loading p{ 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle; 
} 
div#loading p img{ 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
<div id="loading"> 
<p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p> 
</div> 
<script> 
var i=0; 
var c=3; 
var imgarr=new Array 
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif"; 
imgarr[1]="http://img.baidu.com/img/logo-img.gif"; 
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif"; 
var Browser=new Object(); 
Browser.userAgent=window.navigator.userAgent.toLowerCase(); 
Browser.ie=/msie/.test(Browser.userAgent); 
Browser.Moz=/gecko/.test(Browser.userAgent); 
function SImage(url,callback) 
{ 
var img = new Image(); 
if(Browser.ie){ 
img.onreadystatechange =function(){ 
if(img.readyState=="complete"||img.readyState=="loaded"){ 
ii=i+1; 
callback(i); 
} 
} 
}else if(Browser.Moz){ 
img.onload=function(){ 
if(img.complete==true){ 
ii=i+1; 
callback(i); 
} 
} 
} 
img.src=url; 

} 

function icall(v) 
{ 
if(v<c){ 
SImage(""+imgarr[v]+"",icall); 
} 
else if(v>=c){ 
i=0; 
//location.replace('banner.html');//這里寫(xiě)自己的動(dòng)作吧， 
} 
} 

您可能感興趣的文章:

相關(guān)文章

輸入自動(dòng)提示搜索提示功能的使用說(shuō)明:sugggestion.txt
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶(hù)體驗(yàn)
2013-09-09
RequireJS多頁(yè)面應(yīng)用實(shí)例分析
這篇文章主要介紹了RequireJS多頁(yè)面應(yīng)用實(shí)例分析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JS使用getComputedStyle()方法獲取CSS屬性值
經(jīng)常會(huì)用到j(luò)s來(lái)獲取元素的CSS樣式，由于方法眾多，在下面的文章中為大家詳細(xì)整理下
2014-04-04
js 提取某()特殊字符串長(zhǎng)度的實(shí)例
下面小編就為大家分享一篇js 提取某()特殊字符串長(zhǎng)度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
我要點(diǎn)爆”微信小程序云開(kāi)發(fā)之項(xiàng)目建立與我的頁(yè)面功能實(shí)現(xiàn)
這篇文章主要介紹了我要點(diǎn)爆”微信小程序云開(kāi)發(fā)之項(xiàng)目建立與我的頁(yè)面功能實(shí)現(xiàn)，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
js獲得參數(shù)的getParameter使用示例
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下
2014-02-02
JS實(shí)現(xiàn)簡(jiǎn)易日歷效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
純js實(shí)現(xiàn)圖片勻速淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
基于Echarts 3.19 制作常用的圖形(非靜態(tài))
這篇文章主要介紹了基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關(guān)資料,需要的朋友可以參考下
2016-05-05
XMLHTTPRequest的屬性和方法簡(jiǎn)介
由于現(xiàn)在在公司負(fù)責(zé)制作標(biāo)準(zhǔn)的靜態(tài)頁(yè)面，為了增強(qiáng)客戶(hù)體驗(yàn)，所以經(jīng)常要做些AJAX效果，也許你也和我一樣在，學(xué)習(xí)AJAX。
2010-11-11