原生图片懒加载与vue实现图片来加载方法图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。
根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。
懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。
所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。
使用原生JavaScript实现懒加载
window.innerHeight 是浏览器可视区的高度
document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动的过的距离
imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）
图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
        .text {
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="text">
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
    </div>
    <div class="text">
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
    </div>
    <div class="text">
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
        adjwiopwadhawpdhawpdoihwapdhawpodjaopdjOPJADPOJAWDpowjadjoW
    </div>
    <img src="" data-src="https://ts1.cn.mm.bing.net/th/id/R-C.a19531bce78e7fafc98dd2ed4c8250af?rik=dX0UaauTIQJaeg&riu=http%3a%2f%2fpic30.photophoto.cn%2f20140309%2f0035035538207340_b.jpg&ehk=%2bw8KMTnfTx0Xs1MoWCpmuGakiERjlDLu49gl4PcQIXo%3d&risl=&pid=ImgRaw&r=0" alt="">
    <img src="" data-src="https://img13.360buyimg.com/n1/jfs/t1/155220/13/15602/109267/600a9b22E9e75e3ed/e9eca6bfda2a8e33.jpg" alt="">
    <img src="" data-src="https://mms2.baidu.com/it/u=363797487,1828271710&fm=253&app=138&f=JPEG" alt="">


</body>
<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") == "") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

</html>

在vue中实现图片懒加载

在Vue项目中使用图片懒加载也很简单。常用的Vue图片懒加载库有vue-lazyload和vue-lazy。这里以vue-lazyload为例，介绍如何在Vue项目中使用图片懒加载。
安装vue-lazyload 
使用npm安装vue-lazyload：
npm install vue-lazyload --save
引入并使用vue-lazyload 
在main.js中引入vue-lazyload：
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
在需要懒加载的图片元素中，将v-lazy指令绑定到需要懒加载的图片的src属性上，如下所示：
<template>
  < img v-lazy="imageSrc" alt="image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'placeholder.jpg'
    }
  }
}
</script>
在上面的代码中，将imageSrc绑定到需要懒加载的图片的src属性上，同时使用v-lazy指令绑定到imageSrc上，实现图片的懒加载。当图片进入可视区域时，vue-lazyload会自动将imageSrc的值赋给src属性，实现图片的加载。
除了使用v-lazy指令，vue-lazyload还提供了很多其他的配置选项，如loading、error等，可以根据实际需求进行配置。
以上就是在Vue项目中使用图片懒加载的简单介绍。