需求

有时我们需要实现例如快速快速切换页面、图片之类的功能时，能尽快的加载出我们所需的图片会极大提升用户体验，这时用预加载将图片先缓存到浏览器，用户使用需显示图片时无疑会顺畅很多。

核心

当一个图片在其它地方被加载过，那么它就会存在于浏览器缓存中，用到它时可直接从本地缓存中渲染。

特点

增强用户的体验，但会加载服务器的负担。

实现方式

1.CSS方式

通过 css 中设置 background 的方式将图片加载进缓存，写在任意标签下，设置 background-position 使其不可见

background: url("img.jpg") no-repeat -9999px -9999px; 

2.Js方式

<div class="hidden">   
    <script type="text/javascript">    
            var images = new Array()   
            function preload() {   
                for (i = 0; i < preload.arguments.length; i++) {   
                    images[i] = new Image()   
                    images[i].src = preload.arguments[i]   
                }   
            }   
            preload(   
                "http://domain.tld/gallery/image-001.jpg",   
                "http://domain.tld/gallery/image-002.jpg",   
                "http://domain.tld/gallery/image-003.jpg"   
            )   
    </script>   
</div> 

3.AJAX方式

window.onload = function() {   
    setTimeout(function() {   
        var xhr = new XMLHttpRequest();   
        xhr.open('GET', 'http://domain.tld/preload.js');   
        xhr.send();   
        xhr = new XMLHttpRequest();   
        xhr.open('GET', 'http://domain.tld/preload.css');   
        xhr.send();   
        // preload image   
        new Image().src = "http://domain.tld/preload.png";   
    }, 1000);   
};