vue搞定图片懒加载

女爷i 2022-11-25 10:21 143阅读 0赞

# **(一) js原生实现方法** #

css 代码段

<style scoped lang="scss">
    .loading {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .wrapper {
        width: 50%;
        img {
          width: 100%;
          height: 254px;
        }
      }
    }
    </style>

html 代码段

<template>
      <div class="loading">
        <div v-for="(value,index) in imgSrc" :key="index" class="wrapper">
          
          <img src="/static/img/loading.gif" :data_src="value.src" />
        </div>
      </div>
    </template>

js 代码段

<script>
    export default {
      data() {
        return {
          // 图片路径数据
          imgSrc: [
            { src: "/static/img/001.jpg" },
            { src: "/static/img/002.jpg" },
            { src: "/static/img/003.jpg" },
            { src: "/static/img/004.jpg" },
            { src: "/static/img/005.jpg" },
            { src: "/static/img/006.jpg" },
            { src: "/static/img/007.jpg" },
            { src: "/static/img/008.jpg" },
            { src: "/static/img/009.jpg" },
            { src: "/static/img/010.jpg" },
            { src: "/static/img/011.jpg" },
            { src: "/static/img/012.jpg" },
            { src: "/static/img/013.jpg" },
            { src: "/static/img/014.jpg" },
            { src: "/static/img/015.jpg" },
            { src: "/static/img/016.jpg" },
            { src: "/static/img/017.jpg" },
            { src: "/static/img/018.jpg" }
          ]
        };
      },
      created() {},
      mounted() {
        //   当页面加载完成之后和滚动的时候调用srcChange()
        this.srcChange();
        window.addEventListener("scroll", this.srcChange);
      },
      methods: {
        srcChange() {
            // 获取dom元素
          let html = document.documentElement || document.body;
          let imgs = document.querySelectorAll("img");
          for (var i = 0; i < imgs.length; i++) {
            //   如果可视高度+页面的滚动高度如果小于图片距离顶层的位置高度 
            // 就证明图片进入可是区域
            if (html.clientHeight + html.scrollTop > imgs[i].offsetTop) {
                //就把图片的src替换成绑定的data_src值
              imgs[i].src = imgs[i].getAttribute("data_src");
            }
          }
        }
      }
    };
    </script>

# (二) vue-lazyload实现方法 #

**（1）安装插件**

npm install vue-lazyload --save-dev

**（2）在入口文件 man.js 中引入并使用**

import VueLazyload from 'vue-lazyload'

**然后在 vue 中直接使用**

Vue.use(VueLazyload)

**或者添加自定义选项**

Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: 'dist/error.png',
        loading: 'dist/loading.gif',
        attempt: 1
    })

**（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：**

<img v-lazy="/static/img/1.png">

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue搞定图片懒加载

(一) js原生实现方法 css 代码段 <style scoped lang="scss"> .loading { width: 100%

女爷i/ 2022年11月25日 10:21/ 0 赞/ 144 阅读

相关 Vue图片懒加载vue-lazyload-使用

[演示][Link 1] ![322f52b362684db09fd3b1c3599d114b.gif][] 安装插件 npm install vue-l

待我称王封你为后i/ 2022年08月28日 06:39/ 0 赞/ 299 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 458 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 467 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 504 阅读

相关 vue-lazyload 图片懒加载

第一步npm install vue-lazyload --save 然后在main.js里引入 import VueLazyLoad from 'vue-lazyload

布满荆棘的人生/ 2022年05月09日 08:03/ 0 赞/ 389 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 440 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 662 阅读

相关 vue--图片懒加载，使用vue-lazyload

vue v-lazy官方API：[https://www.npmjs.com/package/vue-lazyload][https_www.npmjs.com_packag

╰半橙微兮°/ 2021年08月30日 12:10/ 0 赞/ 739 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 912 阅读