js實現(xiàn)圖片在未加載完成前顯示加載中字樣

更新時間：2014年09月03日 17:57:48 投稿：whsnow

首先判斷瀏覽器再判斷圖片是否加載完成，如果還未加載就顯示“加載中...”，思路及代碼如下

<html>
<title>圖片預(yù)加載</title>
<body>
<script>
//判斷瀏覽器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);

//判斷是否加載完成
function Imagess(url,imgid,callback){  
  var val=url;
  var img=new Image();
  if(Browser.ie){
    img.onreadystatechange =function(){ 
      if(img.readyState=="complete"||img.readyState=="loaded"){
        callback(img,imgid);
      }
    }    
  }else if(Browser.Moz){
    img.onload=function(){
      if(img.complete==true){
        callback(img,imgid);
      }
    }    
  }  
  //如果因為網(wǎng)絡(luò)或圖片的原因發(fā)生異常，則顯示該圖片
  img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
  img.src=val;
}

//顯示圖片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要顯示的圖片，并且指定顯示的位置
window.onload=function(){
  Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/01cf20088f9506f063d98653.jpg","img1",checkimg);
  Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg","img2",checkimg);
  Imagess("http://hiphotos.baidu.com/joanne728/pic/item/892557641806d20eaa184c71.jpg","img3",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216078845_h.jpg","img4",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216d078845_h.","img5",checkimg);
}
</script>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

js操作textarea 常用方法總結(jié)
在DOM里面操作textarea里面的字符，是比較麻煩的,本文將介紹一種比較簡單的方法，需要的朋友可以參考下
2012-12-12
JS實現(xiàn)可控制的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)可控制的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
純JS實現(xiàn)旋轉(zhuǎn)圖片3D展示效果
本文給大家分享的是純js實現(xiàn)的類似flash里的圖片環(huán)繞旋轉(zhuǎn)效果，非常炫酷，有需要的小伙伴可以參考下。
2015-04-04
基于Bootstrap的后臺管理面板 Bootstrap Metro Dashboard
這篇文章主要介紹了基于Bootstrap的后臺管理面板：Bootstrap Metro Dashboard，對Bootstrap的后臺管理面板感興趣的小伙伴們可以參考一下
2016-06-06
js仿支付寶填寫支付密碼效果實現(xiàn)多方框輸入密碼
這篇文章主要介紹了js仿支付寶填寫支付密碼效果實現(xiàn)多方框輸入密碼的功能，感興趣的小伙伴們可以參考一下
2016-03-03
javascript全局自定義鼠標(biāo)右鍵菜單
這篇文章主要為大家詳細(xì)介紹了javascript全局自定義鼠標(biāo)右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JS localStorage存儲對象，sessionStorage存儲數(shù)組對象操作示例
這篇文章主要介紹了JS localStorage存儲對象，sessionStorage存儲數(shù)組對象操作,結(jié)合實例形式詳細(xì)分析了JS使用localStorage存儲對象以及sessionStorage存儲數(shù)組對象相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2020-02-02
Webpack打包速度優(yōu)化方案匯總
Webpack 打包速度優(yōu)化是提升開發(fā)效率和構(gòu)建效率的關(guān)鍵,以下是系統(tǒng)化的優(yōu)化方案,從基礎(chǔ)配置到高級技巧全面覆蓋,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2025-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實現(xiàn)
鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動態(tài)地進(jìn)行存儲分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實現(xiàn)，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
微信小程序選擇器組件picker簡單入門
微信小程序picker表單選擇器的使用,根據(jù)官方介紹的有點不清楚,下面這篇文章主要給大家介紹了關(guān)于微信小程序選擇器組件picker的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03