简单图片预加载

Posted 2020-09-19 Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单图片预加载相关的知识，希望对你有一定的参考价值。

预加载是一项被广泛使用的技术。下面简单实现下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <div id="outer"></div>

    <script>
        var imgArr = [‘img/1.jpg‘,‘img/2.jpg‘,‘img/3.jpg‘,‘img/4.jpg‘],
            outer = document.getElementById(‘outer‘),
            img = document.querySelectorAll(‘img‘),
            preload = function(arr){
                var i,
                    len = imgArr.length,//要加载的图片数量
                    loaded = 0,//已加载图片数量
                    newImg = [],//图片容器
                    end = function(){},
                    //加载完成后调用的函数
                    loadImg = function(){
                        loaded++;
                        alert(‘又加载完了一张图片！‘);
                        if(loaded === len){
                            end(newImg);
                        }
                };

                for(i=0; i<len; i++){
                    newImg[i] = new Image();
                    newImg[i].src = imgArr[i];
                    

                    newImg[i].onload = (function(i){
                        console.log(document.body.innerHTML);
                        loadImg();
                        console.log(‘a‘);
                        outer.appendChild(newImg[i]);
                    })(i)
                    // img[i].src = imgArr[i];
                }

                return{
                    done: function(fn){
                        if(fn) end = fn;
                    }
                }
            };

        window.onload = function(){
            preload(imgArr).done(function(){
                alert(‘全部加载完‘);
            });
        }
        
    </script>
</body>
</html>

以上是关于简单图片预加载的主要内容，如果未能解决你的问题，请参考以下文章

可以直接拿来用的15个jQuery代码片段

js 常用代码片段