图片预加载

2018-07-24  本文已影响0人  TRYao

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

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

上一篇 下一篇

猜你喜欢

热点阅读