欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于js预加载的代码实现

程序员文章站 2022-04-28 09:37:25
预加载:提前加载 在加载较大图片,音频,视频时为了优化用户在打开我们项目时,避免遇到加载缓慢带来的不好的体验. 使用场景: 常用于 游戏,瀑布流 图片预加载: 图片预加载:...

预加载:提前加载

在加载较大图片,音频,视频时为了优化用户在打开我们项目时,避免遇到加载缓慢带来的不好的体验.

使用场景: 常用于 游戏,瀑布流

图片预加载:

图片预加载: 有很多的图片时,若一起加载,用户需要等待的事件较长,所有可以将项目中需要的资源提前加载好.

var img = new image();
img.onload = function(){        
    document.body.appendchild(img);
}
img.src="https://www.2cto.com/uploadfile/2018/0712/20180712123217408.jpg"

这样就完成了单张图片的预加载.

对于瀑布流的实现,要限定宽度的话.我们先获取盒子的宽度,计算出它的高度然后规定图片的高度就可以了.

var boxdiv = document.getelementbyid("box")
var img = new image();
img.onload = function(){
    var w = boxdiv.offsetwidth;
    var h = w*img.height/img.width;
    boxdiv.style.height = h + "px";
    img.style.width = w+"px";
    boxdiv.appendchild(img);
}
img.src="https://www.2cto.com/uploadfile/2018/0712/20180712123217408.jpg"

等待所有资源加载完成后显示:

1.将需要加载的图片的路径提前储存在数组中

var imgs = ["https://www.2cto.com/uploadfile/2018/0712/20180712123217408.jpg",
"https://www.2cto.com/uploadfile/2018/0712/20180712123217408.jpg",
"https://www.2cto.com/uploadfile/2018/0712/20180712123217408.jpg"];

2.定义函数 实现预加载效果

.wrap{
    width: 400px;
    height: 600px;
    border: 1px solid;
    position: relative;
}
#loading{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: lightcyan;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.bar{
    width: 300px;
    height: 30px;
    border: 2px solid green;
}
.progress{
    height: 30px;
    width: 0px;
    background: orange;
}
.game{
    width: 100%;
    height: 100%;
    background: orange;
}
/*
* arr 储存所有图片地址的数组
 * progress 回调函数 将加载的百分比传递给外界使用
 * complete 回调函数 所有图片加载完毕后提交给外界的处理函数
 */
function preloadimg(arr,progress,complete){
    var imgobjs = [];//储存所有加载好的图片资源
    var count = 0;//记录已加载好图片的数量
    for(var i = 0; i < arr.length; i++){
        var img = new image();
        img.onload = function(){
            count++;
            var per = math.floor(count/arr.length*100);
            typeof progress === "function" && progress(per);
            if(count == arr.length){
                //图片已全部加载完毕
                typeof complete === "function" && complete();
            }
        }
        imgobjs.push(img);
        img.src = arr[i];
    }
}

preloadimg(imgs,function(val){
    document.queryselector(".progress").style.width = val + "%";
        document.getelementbyid("val").innerhtml = val + "%";
    },function(){
        document.getelementbyid("loading").style.display = "none";

    });