js图片加载完成之前显示loading中的图片

<html>
<title>js图片未加载完显示loading效果</title>
<body>
<style>
img{float:left;width:200px;height:200px;margin:0 10px 10px 0}
</style>
<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="./static/images/failed.png"}  img.src=val;
}  //显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).style.cssText="";
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片，并且指定显示的位置
window.onload=function(){
var imglist=document.getElementById("imagelist").getElementsByTagName('img');
for(i=0;i<imglist.length;i++)
{  imglist[i].id="img0"+i;  //imglist[i].src="http://www.86y.org/images/loading.gif";  imglist[i].style.cssText="background:url(./static/images/loading.gif) no-repeat center center;"  Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg);
}
}
</script>
<div id="imagelist">
<img data="./static/images/1.jpg" />
<img data="./static/images/2.jpg" />
<img data="./static/images/3.jpg" />
<img data="./static/images/4.jpg" />
<img data="./static/images/5.jpg" />
</div>
</body>
</html>

本文转载自：https://blog.csdn.net/weixin_37221852/article/details/81298735

js图片加载完成之前显示loading中的图片相关推荐

html5 载入网页显示,页面加载完之前显示Loading
1.第一种方式 HTML loading... CSS .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2e ...
vue图片加载完成前增加loading效果
这次给大家带来vue图片加载完成前增加loading效果,vue图片加载完成前增加loading效果的注意事项有哪些,下面就是实战案例,一起来看一下. 如下所示: 1 2 3 4 5 6 7 8 9 ...
图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
loading窗口动画 web_在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画 loading动画代码demo use-pseudo-class .loading{ width: 100px; height: 100px; border: ...
SpringBoot项目静态图片加载浏览器不显示问题解决方案
SpringBoot项目静态图片加载浏览器不显示问题解决方案项目结构如下: 我是通过Maven创建的以Thymeleaf为模板引擎创建的SpringBoot Web项目,发现加载的图片在浏览器不显示 ...
【MFC】动态加载Picture Control控件中的图片
[MFC]动态加载Picture Control控件中的图片前言方法1:CBrush 方法2:SetBitmap 参考链接方法3:重写MyPictureControl 前言在MFC窗体中,我们 ...
js中图片加载失败，显示默认图片
js处理img标签加载图片失败,显示默认图片 1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: $('img').error(function(){$ ...
图片加载失败后显示默认图片
加载失败后显示默认图: <img :src="`${img}.png`" onerror="javascript:this.src='logo.png'" ...
img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代. 方法一:用 background 遮住原图片 <img src="no-such-pic. ...
从零开始实现图片加载特效之黑白照片、倒影图片、图片蒙版
尊重他人的劳动成果,转载请标明出处:http://blog.csdn.net/gengqiquan/article/details/53168797, 本文出自:[gengqiquan的博客] 之前有 ...

js图片加载完成之前显示loading中的图片

js图片加载完成之前显示loading中的图片相关推荐

最新文章

热门文章

js图片加载 完成之前显示loading中的图片

js图片加载 完成之前显示loading中的图片相关推荐

最新文章

热门文章

js图片加载完成之前显示loading中的图片

js图片加载完成之前显示loading中的图片相关推荐