js实现图片在未加载完成前显示加载中字样

最新推荐文章于 2021-06-04 11:27:44 发布

weixin_33852020

最新推荐文章于 2021-06-04 11:27:44 发布

阅读量226

点赞数

原文链接：http://www.cnblogs.com/zhp404/articles/4555009.html

版权

http://www.jb51.net/article/54734.htm
 
<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>

转载于:https://www.cnblogs.com/zhp404/articles/4555009.html

weixin_33852020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片在未加载完成前显示加载中字样

http://www.jb51.net/article/54734.htm<html><title>图片预加载</title><body><script>//判断浏览器var Browser=new Object();Browser.userAgent=window.navigator.userAg...
复制链接

扫一扫