图片预加载

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

<script type="text/javascript">
        // 所有的图片
        const imgs = [
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3pxpzj209n0b6aap.jpg",
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
            
        ];
        let len = imgs.length;
        /**
         * 遍历imgs数组,有序将所有图片加载出来
         * 可以通过控制台查看网络请求,会发现所有图片均按顺序加载
         */
        let count = 0;
        load();

        function load() {
            var imgObj = new Image();
            imgObj.src = imgs[count];

            imgObj.onerror = function () { 
                console.log(count);
                if (count >= len) {
                    console.log('加载完毕');
                } else {
                    load(); // 继续加载下一张
                }

                count++;
            };
        }
    </script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容