图片预加载与懒加载
图片预加载
图片预加载就是图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染。
图片预加载的实现方法有很多,可以通过css、JavaScript、Ajax等方法实现。
-
CSS方法
通过
background
加载图片,但是设置定位在窗口可见区域外(使其不可见)/*CSS - preLoad Image*/ #preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
-
JavaScript
通过newImage = new Image()
、newImage.src="imageSrc"
实现
function preLoadImage( images ){
let isArray = images instanceof Array;
if( isArray ){
let preLoad = [];
for(let i=0,l=images.length;i<l;i++){
preLoad[i] = new Image();
preLoad[i].src = images[i];
}
return true;
} else if( typeof(images) == 'string' ) {
let preLoad = new Image();
preLoad.src = images;
return true;
} else {
throw new TypeError("parma must be Array or string");
return false;
}
}
在实际操作中,需要对图片加载增加加载成功或者加载失败的提示,往往需要通过
Image.onload()
、Image.onerror()
进行监听。
-
Ajax
Ajax预加载图片是使用了
XMLHttpRequest()
对象,对图片进行预加载。// 封装方法参考上面new Image(); var xhr = new XMLHttpRequest(); xhr.open('GET', 'xxx.jpg'); xhr.send();
图片懒加载
实现图片懒加载的关键是监听滚动条,判断图片在窗口中的位置。或者使用
getBoundingClientRect()
获得元素的大小及其相对于视口的位置。
图片懒加载需要记住加载条件:
div.offsetTop < 网页被卷去的高 + 网页可见区域高
// 图片懒加载1(未完善)
function lazyLoad( className="lazy-img", loadOkClassName="lazy-img-ok" ){
// 遍历获取对象
let lazyImg = document.getElementsByClassName( className );
for( let i=0;i<lazyImg.length;i++ ){
// 跳过已经加载的图像
if( lazyImg[i].getAttribute(loadOkClassName) == "true" )
continue;
// 获得滚动条高度
let pageYOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// 获得页面可见高度
let offsetHeight = document.body.offsetHeight;
// 获得图片距上层控件的高度
let imgOffsetTop = lazyImg[i].offsetTop;
// 判断图片是否在页面中可见
if( imgOffsetTop < pageYOffset + offsetHeight ){
// 改变图片的URL
// lazyImg[i].src = lazyImg[i].getAttribute("data-src");
lazyImg[i].src = lazyImg[i].dataset.src;
// 增加加载成功的标志
lazyImg[i].setAttribute(loadOkClassName,"true");
}
}
}
window.onscroll = function(){
lazyLoad();
}
上述代码已经可以实现图片懒加载,但是存在以下问题:
- 在浏览器滚动时会触发多次onscroll 事件,需要对onscroll 事件进行
防抖优化
,否则有可能在短时间内多次触发lazyLoad()
。 - 在图片距离页面可见底部
a px(a>=0)
时进行预加载,使图片在可见范围内提前加载,增强用户体验。(未完成)
这时候就需要增加节流代码,对加载进行函数节流
图片懒加载(节流)(jsrun)
【关于 Javascript 函数防抖与函数节流】可以查看