图片预加载

最近在做一个内嵌在 APP 里的端午抽奖活动，其它的已经基本没什么问题了，就是抽完奖后的图片弹框在弱网环境下加载比较慢。我是一个对用户体验有要求的人，我自己都不能忍受的东西我不会让它被用户看到。

话虽如此，但是图片已经让设计师压缩得很小了，还有什么办法呢。正在我想不到办法的时候测试的一句话惊醒了我，他说他们之前公司是用图片预加载解决这种问题的。想来我们确实也可以在抽奖完成前先把弹框的图片预先加载。

如果图片不多直接在文档底部引入再将其隐藏即可：

<html>
    <head>
        <style>
            .prefetch{
                display:none;
            }
        </style>
    </head>
    <body>

        <img src="./images/0.jpg" class="prefetch" />
        <img src="./images/1.jpg" class="prefetch"/>
        <script src="./javascript/mian.js"></script>
    </body>
</html>

TIP

预加载的图片放在文档底部主要是为了不影响主内容的加载。

若是图片比较多就还是 Javascript 处理比较方便：

function imgPrefetch() {
    for (var i = 0; i < imgList.length; i++) {
        var img = new Image()
        img.src = imgList[i]
    }
}
var imgList = ['./images/0.jpg','./images/1.jpg','./images/3.jpg','./images/4.jpg']
imgPrefetch(imgList)

如此看来预加载倒是比懒加载容易多了。