一个页面图片过多，一次性请求显然不合理，虽然浏览器也会对放在html较前位置的图片先进行加载，这样会大大影响浏览器的渲染速度，而且随着浏览器加载进来的图片越来越多，占用了大量的内存，页面会越来越卡，这个就是个问题了，而且一次性索取大量的信息，对于服务器也不是很好的操作。因此，图片懒加载就派上用场了。
先说一下浏览器的图片加载与存放。浏览器会通过html标签，定位到需要加载的资源，然后依次对资源进行并行下载，根据浏览器的不同，资源加载的顺序也会有区别，有点浏览去会preloader后面的js文件，有的会对所需的资源从上到下进行加载，如果用js进行图片的加载控制的话，要注意两者间的加载先后。
浏览器加载完图片之后，对于要在页面上显示的图片，浏览器就会进行渲染。firefox会将页面渲染过的图片存在缓存中，占用浏览器进出的内存。而且这个图片占用内存的大小和图片的长宽有关，和图片的文件大小无关。也就是说，如果页面上有很多的大图，随着渲染的数量增多，内存会蹭蹭蹭的往上涨。虽然浏览器会对自己的内存进行清理，但是如果一下子渲染大量的图片，浏览器还是很容易就会崩溃。这是可以对图片进行懒加载，并且对浏览过的图片进行清理。
图片的懒加载的方法基本就是对img标签动态添加src来利用html来进行加载。代码大致如下：
接下去，我们还要对已经加载了的，可能用户已经不需要回过去浏览的图片进行清除。
如果要保留之前浏览过的记录，我们需要用一个数组记录一下，具体代码如下：
var imgList = document.images;
var imgDataList = [];
function lazyloadImgIntoDom(imgEle){
if(imgEle.hasLoad){ return; }else{ imgEle.hasLoad = true;
var newSrc = imgEle.attributes['data-lazySrc'].value;
imgDataList.push(newSrc); imgEle.src = newSrc; }
}
function lazyloadpageImg(){
for(var i = 0 ; i < imgList.length ; i++){
var imgTop = imgList[i].getBoundingClientRect().top;
var imgBottom = imgList[i].getBoundingClientRect().bottom;
var pageTop = document.documentElement.clientHeight;
if(imgBottom>0 && imgTop <= pageTop){
lazyloadImgIntoDom(imgList[i]);
}else if(imgBottom < 0){
removeImg(imgList[i]) ;
}
}
}
function removeImg(imgEle){
imgEle.hasLoad = false;
imgEle.src = '';
}
lazyloadpageImg();
window.onscroll = function(){ lazyloadpageImg() ;}
网友评论