大部分网站，都会给网站首页和部分文章页面添加一个懒加载效果，从而减少一次性向服务器进行大量请求，前提是同一网页中有大量的图片调用。

懒加载：首先将图片的src链接设为同一张图，并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

顾名思义，简单理解就是 当页面打开，首先所有数据引进来的图片先不显示，所有图先加载自己指定的某一张图片，一般动态图片效果更有体验性， 然后真正路径图片一个一个显示到页面，从而达到懒加载效果。

优点：懒加载能防止页面一次性向服务器响应大量请求导致服务器响应慢，防止页面卡顿或崩溃等问题。

下面，就给大家讲解下给网站添加懒加载教程

其实就是将图片src赋值为一张指定的图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片。

css代码可以自行定义，没有特殊的要求。

HTML代码：

< img  src="指定的图片路径"  data-src="最终要显示的图片路径" />

< img  src="指定的图片路径"  data-src="最终要显示的图片路径" />

在img标签中，把原本src指向的图片路径改为指定的一张图， 在img标签中加上data-src 将他指向最终要显示的图

src 为路径

data-src 为自定义属性

JS代码:

< script>

 //函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，

 function throttle(fn, delay, atleast) {

//进行去抖处理

 var timeout = null,

 startTime = new Date();

return function() {

var curTime = new Date();

clearTimeout(timeout);

            if(curTime - startTime >= atleast) {

                fn();

                startTime = curTime;

            }else {

                timeout = setTimeout(fn, delay);

            }

        }

    }

    function lazyload() {

        var images = document.getElementsByTagName('img');

        var len    = images.length;

        //存储图片加载到的位置，避免每次都从第一张图片开始遍历       

        var n      = 0;

        return function() {

            var seeHeight = document.documentElement.clientHeight;

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            for(var i = n; i < len; i++) {

                if(images[i].offsetTop < seeHeight + scrollTop) {

                    if(images[i].getAttribute('src') === '指定的图片路径') {

                     images[i].src = images[i].getAttribute('data-src');

                    }

                n = n + 1;

                 }

            }

        }

    }

    var loadImages = lazyload();

    //初始化首页的页面图片

    loadImages();

    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);

  //函数节流（throttle）与函数去抖（debounce）处理,

    //500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数

< /script>

备注：使用时，把< img  < /script> < /script>等标记中的空格去掉，避免使用不了。

上一篇：网站开发中常见的数据库类型有哪些？

下一篇：网站安全策略是什么？