预加载的介绍
资源预加载是另一个性能优化技术,预加载简单来说就是将 所有所需要的资源全部都提前进行请求,把资源都先加载到本地上,这样之后用到的时候,就直接从缓存中取资源就好。
为什么用使用预加载技术呢?
在网页全部加载之前,对一些内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的要么就会长时间的展示一片空白,直到所有内容加载完毕。
实现预加载的几种办法
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('');
// 加载 图片
ew Image().src = "http://domain.tld/preload.png";
}, 1000);
};
5. 懒加载和预加载的区别
加载时机不同:懒加载是迟缓加载甚至不加载, 预加载是提前加载
服务器的影响: 懒加载对前端服务器有一定的缓解压力作用,预加载则会增加服务器的压力