懒加载的原理、实现

懒加载
懒加载即按需加载，当页面需要时再加载处理，以减少本地缓存的压力。
懒加载的原理：页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，==把真正的路径存在元素的“data-url”==的自定义属性里，要用的时候就取出来，再设置；

延迟加载实现方式有三种：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

可视区加载实现：
1>在HTML页面将img元素的src属性先用占位图如1x1px的图片替换
2>当图片出现在浏览器的可视区域时（需要利用屏幕滚动事件监控是否满足这个条件），再为img的src属性赋予真正路径。
3>可以利用setTimeout和setInterval来实现延迟加载
代码如下：

//获取页面懒加载的图片;
//var img = document.getElementById('lazyLoadImg');//单个图片
//返回一个满足ID名的所有img元素的类数组
var imgs = document.querySelectorAll('#lazyLoadImg');

function isVisible(e) {
//获取屏幕可视窗口大小
    var winH = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;
    //获取滚动条的位置
    var scrolTop = document.documentElement.scrollTop||document.body.scrollTop;
    //获取元素离页面顶部的距离，元素的y位置
    var eleOffsetTop = e.offsetTop;
    if(eleOffsetTop < winH+scrolTop) {
	    return true;
    }else { 
        return false;
    }
}
function lazyLoad(imgs) {
    for(var i=0; i<imgs.length;i++){
	    if(isVisible(imgs[i])) {
		    imgs[i].src = imgs[i].getAttribute('data-src');
	 	}
	}
}
window.onload = window.onscroll = function() {
    lazyLoad(imgs);
}

if语句原理图如下。当元素的offsetTop值小于可视区高度+滚动条滚动距离的和，表示元素进入到了可视区域
在这里插入图片描述

jQuery实现方式如下：

function isVisible($ele){
    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;
    if (offSetTop < winH + scrollTop) {
        return true;
    } else {
        return false;
    }
}

$(window).on("scroll", function{
    if (isVisible($ele)){
        console.log(true);
    }
})

var hasShowed = false;
$(window).on("sroll",function{
    if (hasShowed) {
        return;
    } else {
        if (isVisible($ele)) {
            hasShowed = !hasShowed;
            console.log(true);
        }
    }
})

懒加载的原理、实现

猜你喜欢