预加载那些事儿

博客原文：http://longtean.top/2017/10/15/%E5%9B%BE%E7%89%87%E9%A2%84%E5%8A%A0%E8%BD%BD/

在慕课上学习了图片的预加载，写一篇博客总结一下，方便以后复习，并与后面的懒加载作对比。

什么是图片预加载

  预知用户将发生的行为，提前加载用户所需要的图片。换句话说，就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白。可分为无序加载和有序加载

举个栗子：

• 网站的loading页
  • 在显示加载中的缓冲标志时，正在疯狂加载需要的图片，而需要显示图片时，就不需要向服务器请求，直接从缓存中加载就可以了。

实现的方法

• 使用css的background属性将图片预加载到屏幕看不到的地方，就像下面这样，只要图片存储的路径不改变，在其他地方调用这些图片是，浏览器就会在渲染过程中使用预加载（缓存）的图片，不需要使用css，但这种方法存在一些问题，会增加页面的整体加载时间,可以通过js来延迟加载预加载的图片

preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
//也可以设置
{ width: 0; height: 0; display: none};

• 还可以通过js来实现预加载，这里打个小广告：这是一个预加载插件，有兴趣的同学可以看看。
• 这里再贴出网上的一些实现：

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            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(
                ";,
                ";,
                ";
            )
        //--><!]]>
    </script>
</div>

• 还有就是通过ajax实现预加载，不仅可以加载图片，还可以预加载css，js等。比直接使用js的好处在于加载js和css不会影响到当前页面。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        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);  
};　　

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的延时是为了防止脚本挂起，而导致正常页面出现功能问题。

参考文章

参考一
参考二