懒加载实现原理：

1、对于img标签，只要将图片地址赋给src属性，浏览器解析的时候就会自动去请求图片地址所指向的资源，浏览器的这个机制我们是没办法改变的，那么我们只能在src属性上做文章，在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src，src属性留空。

2、设置一个定时器定时检测出现在视图内的图片，并将其data-src属性的值赋值给src属性。（其实这个地方也可以通过事件来检测）

原生js的实现：

var imgs = document.getElementsByTagName(“img”);
function lazyload(){
var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
for(var i=0,len=imgs.length;i<len;i++){ var x = scrollTop + viewportSize - imgs[i].offsetTop; if(x>0){
imgs[i].src = imgs[i].getAttribute(“loadpic”);
}
}
}
setInterval(lazyload,1000);

jQuery的实现：
$(function(){
var viewportSize = $(window).height();
var lazyload = function(){
var scrollTop = $(window).scrollTop();
$(“img”).each(function(){
var _this = $(this);
var x = viewportSize + scrollTop + _this.position().top;
if(x>0){
_this.attr(“src”,_this.attr(“loadpic”));
}
})
}
setInterval(lazyload,1000);
})

我是分割线---------------------------------------------------------------------------------------------------------------------------------------------
图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

原理即是网页代码中有img标签，但是没有src属性，只是把src原本应该放的图片链接放到另外一个属性值去，比如说data-src，这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接，通过适时把获取到的图片链接赋值给src属性上，这样图片就能在适时的时候渲染出来，而不是一次性全部加载，而是通过鼠标滚动，一个一个加载进来。

基于jQuery的代码（使用前务必引入jQuery）：

====================================================================================================================================================================

-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。
（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；
function isShow($el){
var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度
if(top < scrollH + winH){
return true;//在可视范围
}else{
return false;//不在可视范围
} }
（二）监听窗口滚动事件，检查元素是否在可视范围内;
$(window).on(‘scroll’, function(){//监听滚动事件 checkShow(); }) checkShow(); function checkShow(){//检查元素是否在可视范围内 $(‘img’).each(function(){//遍历每一个元素 var $cur = $(this);if(!!isloaded($cur)){return;}//判断是否已加载 if (isShow(KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ showImg(cur); },300)//设置时间是为了更好的看出效果 }; }); }
（三）元素显示的时候把之前的默认照片替换成data-src里的照片。
function showImg($el){
$el.attr(‘src’, $el.attr(‘data-src’));
$cur.data(‘isloaded’,true);
}

转自：博客（https://www.cnblogs.com/luckygirl-1/p/10286132.html）