一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js實現圖片在未加載完成前顯示加載中字樣

js實現圖片在未加載完成前顯示加載中字樣

2021-03-07 18:00JavaScript教程網 JavaScript

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<title>圖片預加載</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);
      }
    }   
  } 
  //如果因為網絡或圖片的原因發生異常，則顯示該圖片
  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>

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板： 亚洲日本免费 | 亚洲男人天堂影院 | 精品日本一区二区 | 日产乱码卡一卡2卡三卡四福利 | 色综合久久丁香婷婷 | 国产青草视频在线观看免费影院 | 第一次破学生处破 | 海角社区在线视频 | 精品国产自在现线拍国语 | 闺蜜的样子小说安沁在线阅读 | 久久中文字幕综合不卡一二区 | 久久婷婷五月综合色精品首页 | 52zfl宅福利yxpjw | 手机跑分排行最新排名 | 久久99r66热这里只有精品 | 好大好深受不了了快进来 | 91会员 | 国产最新进精品视频 | 午夜精品久久久久 | 国产麻豆麻豆 | 色综合久久夜色精品国产 | 日韩精品中文字幕久久 | 青草草在线观看 | 免费观看视频在线 | 免费视频片在线观看 | 天美影视传媒mv直接看 | 色婷婷综合久久久 | h版欧美大片免费观看 | 侵犯小男生免费视频网站 | 亚洲AV久久无码精品九九软件 | 天天操天天舔 | 91色香sxmv最网页版新地址 | 超逼网| 深夜啪啪网站 | 东北老女人91p0rny | 国产色在线观看 | 亚洲欧美日韩综合在线播放 | 67194最新网址 | 校园高h| 久久久精品国产免费A片胖妇女 | 天天操免费视频 |