博客原文: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毫秒的延时是为了防止脚本挂起,而导致正常页面出现功能问题。