改完如下：这样我们的懒就实现了，如需补充

　　改完如下：这样我们的懒就实现了，如需补充

　　大部分网站都会对部分文章图片或封面图片添加延迟加载效果，从而减少一次对服务器的大量请求。

　　懒加载：首先将图片的src链接设置为同一张图片，并将真实图片地址存放在img标签的custom属性中。当js监测到图片元素进入可视化窗口时，会将地址存放在src属性中的自定义属性中，以达到延迟加载的效果。

　　顾名思义，简单的理解就是在打开页面的时候，并不是先显示所有从数据中导入的图片。所有图片首先加载自己指定的某张图片。一般动态图片效果较好，然后将真实路径图片一一展示。页面，从而达到延迟加载的效果。

　　优点：延迟加载可以防止页面一次响应大量的请求给服务器，导致服务器响应缓慢，防止页面卡死或崩溃等问题。

　　

　　接下来给大家讲解网站如何添加懒加载教程

　　其实就是把图片src分配给了一个指定的图片。当用户滚动滚动条到可见区域的图片时，加载真实图片。

　　css代码：（这里只是给图片设置了一个大小，具体自己设置）

　　

img {

display: block;

margin-bottom: 10px;

width: 100px;

}

　　HTML代码：

　　

指定的图片路径

指定的图片路径

指定的图片路径

指定的图片路径

指定的图片路径

　　在img标签中，将原src指向的图片路径改为指定图片，并在img标签中继续添加data-src指向最终要显示的图片

　　src 是路径

　　data-src 是一个自定义属性

　　JS代码

　　

//函数绑定在 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(&#39;src&#39;) === &#39;指定的图片路径&#39;) {

images[i].src = images[i].getAttribute(&#39;data-src&#39;);

}

n = n + 1;

}

}

}

}

var loadImages = lazyload();

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

loadImages();

window.addEventListener(&#39;scroll&#39;, throttle(loadImages, 500, 1000), false);

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

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

　　在 Vue 中实现延迟加载

　　首先，我们需要下载并安装延迟加载插件（模块化）

　　npm install vue-lazyload -s

　　安装后，如下图

　　

　　接下来需要模块化引入vue-lazyload.js

　　import lazyload from "vue-lazyload"

　　接下来我们在VUE中引入一张图片。单引号是当时懒加载时会显示的图片。具体路径请自行寻找路径。

　　Vue.use(

lazyload,{

    loading:&#39;../static/images/ttp.gif&#39;}

)

　　接下来我们找到需要延迟加载的图片位置代码，如：

　　listB[0].Pic

　　我们可以将:src改为v-lazy，修改如下：

　　<img v-lazy="listB[0].Pic"/>

　　这样就实现了我们的懒加载。如需补充，请在下方留言