1.预加载,懒加载怎么实现
预加载核心要点:
1.图片等静态资源在使用前提前请求;
2.资源后续使用可以从缓存中加载,提升用户体验;
3.页面展示的依赖关系维护(必要的资源加载完才显示页面,防止白屏)
实现预加载主要有三个方法:
1.使用CSS,可容易,搞笑地预加载图片,代码如下:
#preload-01{background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;}
#preload-02{background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px;}
#preload-03{background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;}
将这三个ID选择容器应用到html元素中,我们可以通过CSS的background属性将图片预加载到屏幕外的背景上,只要图片的路径不变,当他们在web其他地方被调用的时候,浏览器就会在渲染过程使用预加载的图片,不需要JavaScript,但是这个方法会使得加载的图片和页面的内容一起被加载,加长了页面的整体加载时间。为了改进这种方法,可以增加JS代码来优化:
function preloader() {
if(document.getElementById) {
document.getElementById("preload-01",style.background =
"url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";)
document.getElementById("preload-02",style.background =
"url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; )
document.getElementById("preload-03",style.background =
"url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; )
}
}
function addLoadEvent() {
var oldonload = window.onload;
if(typeof window.onload !== 'function') {
window.onload = func;
} else {
window.onload = function() {
if(onload){
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
在脚步第一部分,我们使用了类选择器的元素并设置了background属性,以预加载不同的图片,脚本第二部分,使用addLoadEvent()函数来延迟preloader()函数加载的时间,知道页面加载完毕,如果js无法在用户的浏览器中正常运行,图片就不会被预加载,当页面调用的时候就会正常显示。
2.使用JavaScript来实现预加载:
<div class=""hidden>
<script type=&#