<script>
// loading
var loading = document.getElementById("loading"); // loading页面,完毕就关闭
var loadBar = document.getElementById("loadBar"); // 加载条
var imgHrf = 'images/'; // 图片路径
var loadTrue = true; // 第二数组loading的时候,判断的值
var arrImgOne = ['music_sp.png','load_sp.png','yanwu.png'];
var arrImgTwo = ['pg5_bg.jpg','pg5_guang.png','pg5_h_peo_bg.png'];
function loadFn(arrImg){
//计算图片加载到百分值多少
var per = null;
per = 100/arrImg.length;
//判断,传进来的参数(图片数组)的长度是否大于0,才执行下面的loading
if(arrImg.length > 0){
//给图片加上路径
for(var i=0; i<arrImg.length;i++){
arrImg[i] = imgHrf+arrImg[i]
}
var loadImg = new Image();
function count(num)
{
loadImg.src = arrImg[num];
loadImg.onload = function()
{
// onload完成后,改变对应的值
var rateNum = parseInt((num+1)*per);
loadBar.style.width=rateNum+"%";
//alert(num)
//console.log(num);
//如果加载到百分百就隐藏loading页面
if(rateNum==100){
loading.style.display = "none";
// 如果不判断,loadFn(arrImgOne)到这里的时候,调用loadFn(arrImgTwo),加载第二个数组的图片;
// 第二次load到这里的时候,又会重新调用loadFn(arrImgTwo),会导致load一直loading;
if(loadTrue){
loadFn(arrImgTwo);
}
loadTrue = false; //第二个数组图片loading完了,就让这个变量变成false,下次进来就不会再执行,等于终止loading
}
if(num<arrImg.length)
{
num++;
if(num<arrImg.length)
{
count(num);
}
}
}
}
count(0);
}else{
loading.style.display = "none";
};
}
loadFn(arrImgOne);
</script>
后台预加载(完善版),可加载多组图片
最新推荐文章于 2022-05-10 15:08:43 发布