图片懒加载的两种方式

fulfilled

已于 2022-05-23 19:21:31 修改

阅读量202

点赞数

分类专栏：面试文章标签： javascript

于 2022-05-23 11:14:48 首次发布

本文链接：https://blog.csdn.net/weixin_46382886/article/details/124923797

版权

面试专栏收录该内容

10 篇文章 0 订阅

订阅专栏

方式一：事件监听

<!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>
  </head>
  <style>
    .abs {
      height: 900px;
    }
  </style>
  <body>
    <div class="abs">asada</div>
    <img data-src="../assets/images/banner-1.png" alt="" />
    <img data-src="../assets/images/banner-2.png" alt="" />
    <div class="abs"></div>
    ·
    <img data-src="../assets/images/banner-3.png" alt="" />
    <img data-src="../assets/images/banner-4.png" alt="" />
    <img data-src="../assets/images/banner-5.png" alt="" />
  </body>
</html>
<script>
  //   方法一：事件监听
      const images = document.querySelectorAll("img");
      window.addEventListener("scroll", (e) => {
        images.forEach((image) => {
          const imageTop = image.getBoundingClientRect().top;
          if (imageTop < window.innerHeight) {
            const data_src = image.getAttribute("data-src");
            image.setAttribute("src", data_src);
          }
          console.log("看见了");
        });
      });
  
</script>

方式二：IntersectionObserverSHI

    const callback = (entires) => {
      entires.forEach((entry) => {
        if (entry.isIntersecting) {
          const image = entry.target;
          const data_src = image.getAttribute("data-src");
          image.setAttribute("src", data_src);
          observer.unobserve(image);
          console.log("触发");
        }
      });
    };
    const images = document.querySelectorAll("img");
    const observer = new IntersectionObserver(callback);
    images.forEach((image) => {
      observer.observe(image);
    })

实例演示：使用vue-lazyload

step1：安装vue-lazyload

npm i vue-lazyload -S

step2:main.js

import Vue from 'vue'
import App from './App.vue'

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  // require必须携带扩展名
  loading: require('./assets/loading.gif'),
 
})

step3:调用

<template>
  <div id="app">
  <div>
    <li v-for="(item,index) in imgList" :key="index">
      <img v-lazy="item" alt="" style="width:60px;height:60px">
      <div></div>
    </li>
  </div>
  </div>
</template>

<script>
export default {
 
 data(){
   return{
     imgList:[
      require('./assets/banner-1'+'.png'),//切记一定要完整名 必须携带扩展名
       require('./assets/banner-1.png'),
       require('./assets/banner-2'+'.png'),
       require('./assets/banner-3'+'.png'),
       require('./assets/banner-4'+'.png'),
       require('./assets/banner-5'+'.png'),
      
     ]
   }
 }
}
</script>


<style>
div{
  height: 200px;
}
li{
  list-style: none;
}
</style>