羽筠的博客通过本文主要向大家介绍了原生js如何判断浏览器,轮播图教程原生js,原生js,原生js轮播图,原生js是什么意思等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
自己写了一个判断页面中图片加载完成的方法，用原生JS完成，不用jq主要考虑在不加载jq的情况下，代码可以正常执行
demo页面代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>页面图片加载完成测试</title>
</head>
<body>
<div id="loadingBox" style="display:none;">
<img src="public/img/1.png" />
<img src="public/img/2.png" />
<img src="public/img/3.png" />
<img src="public/img/4.png" />
<img src="public/img/5.png" />
</div>
<script type="text/javascript">
//'loadingBox' => 存放 指定要加载的图片 的上级盒子 ID
getImgLoadEd('loadingBox',function(){
alert('所有加载完成');
});
//判断 指定要加载的图片 是否加载完成
function getImgLoadEd(loadingBox,callback){
//存放 指定要加载的图片 的盒子
var imgAll = document.getElementById(loadingBox);
//指定要加载的图片 的数量
var imgL = imgAll.children.length;
//指定要加载的图片 起始 key
var imgStart = 0;
//单张 指定要加载的图片 是否加载完成（如果没有，则定时器不断执行的方法IfLoadImg时，会在方法中有判断此变量布尔值，并提前中止不再住下做多余的执行 ， 直到此图片加载完成后才会往下执行，要加载图片的KEY才会+1）
var isLoad = false;
//定时器执行的 加载图片 方法
function IfLoadImg(){
//所有图片加载完毕
if(imgStart >= imgL){
console.log('图片加载完成，图片总数量：' + imgStart);
clearInterval(loadTimer);
if(callback){
callback();
}
return;
}
console.log('上张图片是否加载完成：' + isLoad);
console.log('当前加载图片KEY：' + imgStart);
//单张 指定要加载的图片 未加载完成时，不再往下执行
if(!isLoad && imgStart != 0){
return;
//单张 指定要加载的图片 加载完成后，继续往下执行 1 次
}else{
isLoad = false
}
//根据 指定要加载的图片 的KEY 加载图片的方法
loadImg(imgStart);
function loadImg(imgKey){
var curImg = imgAll.children[imgKey].src;
var loadImg = new Image();
loadImg.src = curImg;
loadImg.onload = function(){
//单张 指定要加载的图片 加载完成后，设置KEY + 1，并设置是否加载成功的变量为true
isLoad = true;
imgStart++;
}
}
}
//定时器执行 指定要加载的 单张 图片 方法
var loadTimer = setInterval(IfLoadImg,10);
}
</script>
</body>
</html>