极客观点
项目管理
HarmonyOS
这段代码是判断图片不同加载状态的（网上copy来的）。
加载中显示加载动画，
加载完成后，显示图片，
加载失败时显示失败图片。
请问，这个方案有没有需要优化的地方帮我指出，如果有更好的方案也请给我指点下。谢谢。
<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);
console.log(img.style, imgid);
}
}
}
//如果因为网络或图片的原因发生异常，则显示该图片
img.onerror = function () {
img.src = "http://www.86y.org/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].style = "background:url(loading.gif) no-repeat center center;";
// console.log(imglist[i].getAttribute("data"),imglist[i].id,checkimg);
Imagess(imglist[i].getAttribute("data"), imglist[i].id, checkimg);
}
}
</script>
<div id="imagelist">
<img data="http://pics.sc.chinaz.com/files/pic/pic9/201805/wpic1150.jpg" />
<img data="http://t2.hddhhn.com/uploads/tu/201805/9999/27d145024a.jpg" />
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile39.jpg" />
<img data="http://t2.hddhhn.com/uploads/tu/201805/9999/69159ddda4.jpg" />
<img data="http://t2.hddhhn.com/uploads/tu/201805/9999/edb3c6c514.jpg" />
</div>
</body>
</html>
html5