后台预加载（完善版），可加载多组图片

最新推荐文章于 2025-07-23 12:46:39 发布

eling-

最新推荐文章于 2025-07-23 12:46:39 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/50832623

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用JavaScript来实现图片资源按需加载的方法，通过计算加载进度百分比并动态显示加载条，有效提升了用户体验。文章详细讲解了如何通过创建Image对象来加载不同类型的图片资源，并在加载完成后更新加载进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>