首先，为什么要使用懒加载？
目前，对页面加载速度影响最大的就是图片了，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度就会变得缓慢，一般在十秒左右页面还没有加载完成的话，也许会失去很多的想要继续阅读下去的用户。
所以，对于图片过多的页面，为了加速页面加载速度，很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。
方法一：设置滚轮事件
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
注：图片要指定宽高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
提醒：在写代码前，需要了解盒子模型中对各种高度的定义以及其区别，这样才不会出现高度的歧义。
代码如下：
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- img {
- display: block;
- margin-bottom: 50px;
- width: 400px;
- height: 400px;
- }
- </style>
- </head>
- <body>
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- </body>
- //JavaScript原生代码如下：
- <script>
- var num = document.getElementsByTagName('img').length;
- var img = document.getElementsByTagName("img");
- var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
- lazyload(); //页面载入完毕加载可是区域内的图片
- window.onscroll = lazyload;
- function lazyload() { //监听页面滚动事件
- var seeHeight = document.documentElement.clientHeight;//可见区域高度
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- //滚动条距离顶部高度
- for (var i = n; i < num; i++) {
- if (img[i].offsetTop < seeHeight + scrollTop) {
- if (img[i].getAttribute("src") == "default.jpg") {
- img[i].src = img[i].getAttribute("data-src");
- }
- n = i + 1;
- }
- }
- }
- </script>
- //jQuery原生代码如下：
- <script>
- var n = 0,
- imgNum = $("img").length,
- img = $('img');
- lazyload();
- $(window).scroll(lazyload);
- function lazyload(event) {
- for (var i = n; i < imgNum; i++) {
- if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
- if (img.eq(i).attr("src") == "default.jpg") {
- var src = img.eq(i).attr("data-src");
- img.eq(i).attr("src", src);
- n = i + 1;
- }
- }
- }
- }
- </script>
方法二：使用节流函数进行性能优化
如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频的触发，那么这样是非常影响浏览器的性能的。
那么我们可以通过实现限制触发频率来进行性能优化。要想限制触发频率，就想到了节流函数。
节流函数：只允许一个函数在规定秒数内执行一次。
实例如下：
function throttle(fun, delay, time) {//fun 要执行的函数
var timeout,//delay 延迟//time 在time时间内必须执行一次
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));
如此一来，懒加载问题便是得到了很好的解决，当然，前端博大精深，还有很多的方法去实现，这里只是最常用，最能理解的方式。
