预加载那些事儿
2017-10-17 本文已影响38人
LongTean
博客原文：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毫秒的延时是为了防止脚本挂起，而导致正常页面出现功能问题。
