给网站中图片实现一个懒加载的方法

大部分网站，都会给部分文章图片或者封面图片添加一个懒加载效果，从而减少一次性向服务器进行大量请求。

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

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

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

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

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

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

<style>
    img {
        display: block;
        margin-bottom: 10px;
        width: 100px;
    }
</style>

HTML代码：

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

在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>

在Vue中实现懒加载

首先，我们需要下载下安装下懒加载的插件(模块化)

npm install vue-lazyload -s

安装完，如下图

共享博客

接着，我们需要模块化式引入 vue-lazyload.js

import lazyload from "vue-lazyload"

下面，我们在VUE中引入一张图片，单引号里面的就是到时候懒加载时候显示的图片，具体路径大家自己找对自己的路径

Vue.use(
lazyload,{
    loading:'../static/images/ttp.gif'}
)

下一步我们找到需要实现懒加载的图片位置代码，如：

<img :src="listB[0].Pic"/>

我们将 :src 改为 v-lazy即可，改完如下：

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

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

给网站中图片实现一个懒加载的方法

在Vue中实现懒加载

猜你喜欢