一、预加载作用:
牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
二、实现方式:
1.用CSS实现预加载; 2.仅使用JavaScript实现预加载; 3.使用Ajax实现预加载。
常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
将图片加载到可视区外。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间
2.使用js
function preload() {
var img1=new Image();
var img2=new Image();
var img3=new Image();
img1.src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
img2.src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg";
img3.src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg";
}
function addLoadEvent(func){
var oldload=window.onload;
if (typeof window.onload!= "function"){
window.onload=func;
}else{
window.onload=function(){
if (oldload) {
oldload();
}
func();
}
}
}
addLoadEvent(preload);
3.使用ajax
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);
};