预加载的介绍
资源预加载是另一个性能优化技术，预加载简单来说就是将 所有所需要的资源全部都提前进行请求，把资源都先加载到本地上，这样之后用到的时候，就直接从缓存中取资源就好。
为什么用使用预加载技术呢？在网页全部加载之前，对一些内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的要么就会长时间的展示一片空白，直到所有内容加载完毕。
实现预加载的几种办法
1.单纯使用css 实现预加载
#preload-01 { background : url (http://..../image1.jpg) no-repeat -9999px -99999px}
#preload-02 { background : url (http://..../image2.jpg) no-repeat -9999px -99999px}
#preload-03 { background : url (http://..../image3.jpg) no-repeat -9999px -99999px}
优点： 容易而高效
缺点： 该方法加载图片，会和页面中的其他内容一起加载，增加了页面的整体加载时间
2. css+ js 实现预加载
function preLoad() {
document.getElementById("preload-01").style.background =
"url(http:......) norepeat -9999px -99999px ";
document.getElementById("preload-01").style.background =
"url(http:......) norepeat -9999px -99999px ";
document.getElementById("preload-01").style.background =
"url(http:......) norepeat -9999px -99999px ";
}
function addLoadEvent(func) {
// 获取 window 页面加载完成后，执行的函数
var oldonLoad = window.onload;
// 如果类型不是 函数，则直接将preLoad 赋值给其
if (typeof windwo.onload != "function") {
window.onload = func;
}
// 如果是，则在此基础上，在添加preLoad 函数，让其在页面加载完后执行
else {
window.onload = function () {
if (oldonLoad) {
oldonLoad();
}
func();
};
}
}
addLoadEvent(preLoad);
此方法解决了 单纯使用css的问题，实则就是将其在页面加载完成之后才加载
3.单纯的使用js也是挺不错的方法
function preloader() {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http:....";
img2.src = "http:....";
img3.src = "http:....";
}
function addLazyLoadEvent(func) {
let oldonLoad = window.onload;
if (typeof oldonLoad !== "function") {
window.onload = func;
} else {
window.onload = function () {
if (oldonLoad) {
oldonLoad();
}
func();
};
}
}
addLazyLoadEvent(preloader);
4.利用ajax 实现预加载
该方法利用DOM，不仅仅可以预加载图片，还可以预加载CSS、JavaScript等相关的东西，相比 于JavaScript，优越之处在于JavaScript 和css的加载不会影响到页面的加载。更简洁、高效。
//用js实现css、js、以及图片的加载
window.onload = function () {
setTimeout(function () {
var head = document.getElementsByTagName("head")[0]; // 获取头
var css = document.createElement("link"); // 创造link标签
css.type = "test/css"; // 类型
css.rel = "stylesheet"; // 外部样式的引入要加
css.url = "http:....css"; // 路径
var js = document.createElement("script"); // 创script
js.type = "test/javascript";
js.src = "http:......js"; // 路径
head.appendChild(css); // 添加到head中
head.appendChild(js);
new Image().src = "http:......"; // 图片的加载
}, 1000);
};
//用ajax的话，实现js、css、图片的加载
window.onload = function () {
setTimeout(function () {
// 请求一 加载js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://domain.tld/preload.js");
xhr.send("");
// 请求二， 预加载 css文件
xhr = new XMLHttpRequest();
xhr.open("GET", "http://domain.tld/preload.css");
xhr.send("");
// 加载 图片
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
5. 懒加载和预加载的区别
加载时机不同：懒加载是迟缓加载甚至不加载， 预加载是提前加载
服务器的影响： 懒加载对前端服务器有一定的缓解压力作用，预加载则会增加服务器的压力
