您的位置：首页 > Web前端 > JavaScript

原生JS判断页面中图片加载完成

2017-08-14 17:11 537 查看

自己写的判断页面中图片加载完成的方法，用原生JS完成，不用jq主要考虑在不加载jq的情况下，代码可以正常执行

判断指定ID的盒子中所有图片加载，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>

给出要判断加载图片URL数组，根据每个URL加载图片，JS代码如下：

getImgLoadEd(function(){
alert('所有加载完成');
});
function getImgLoadEd(callback){
var imgAll = [
'public/image/bg1.jpg',
'public/image/bg2.jpg',
'public/image/bg3.jpg',
'public/image/bg4.jpg',
'public/image/bg5.jpg',
'public/image/bg6.jpg',
'public/image/bg7.jpg',
'public/image/bg8.jpg',
'public/image/bg9.jpg',
'public/image/bg10.jpg',
];
var imgL = imgAll.length;
var imgStart = 0;
var isLoad   = false;
var bfb = 0;
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;
}else{
isLoad = false
}
loadImg(imgStart);
function loadImg(imgKey){
var curImg = imgAll[imgKey];
var loadImg = new Image();
loadImg.src = curImg;
loadImg.onload = function(){
isLoad = true;
imgStart++;

b2dc
bfb = parseInt(imgStart / imgL * 100);
console.log(bfb + '%');
$('.page1_text').html(bfb + '%');
}
}
}
var loadTimer = setInterval(IfLoadImg,10);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航