一、为什么需要懒加载？对于图片过多的使用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。
二、懒加载的实现原理-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" src="xxx" />,等到此图片出现在视野范围内了，获取img元素，把src里的值赋给src。
三、实现懒加载必备的知识点（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；
paste_image.png
    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($cur)) {               settimeout(function(){                 showimg($cur);                 },300)//设置时间是为了更好的看出效果             };         });     }
（三）元素显示的时候把之前的默认照片替换成src里的照片。    function showimg($el){         $el.attr('src', $el.attr('src'));         $cur.data('isloaded',true);     }
paste_image.png
paste_image.png
以上就是细说jquery如何实现懒加载的详细内容。