用IntersectionObserver实现图片懒加载

最新推荐文章于 2023-07-19 14:59:24 发布

hans774882968

最新推荐文章于 2023-07-19 14:59:24 发布

阅读量247

点赞数 1

分类专栏： web&CTF 文章标签： css html html5 javascript

本文链接：https://blog.csdn.net/hans774882968/article/details/120623809

版权

web&CTF 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

使用IntersectionObserver这个api可以更简便地实现图片的懒加载。它是浏览器原生提供的构造函数，它的用法网上也不少，且不容易踩坑。

值得注意的是，如果图片没加载时默认高度为0，那么这个懒加载效果就会打不少折扣，这个折扣程度和前几张图片的高度有关。比如我本地如果不开console（底部），刚进入页面就会一次性全部加载。开console并拉到占据大部分高度的位置，才能让它刚进入页面时，只加载2张图片。所以我们为.img-area预设了一个min-height。

HTML+CSS

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>滚动加载更多</title>
  <!--<link rel="stylesheet" type="text/css" href = "./index.css" />-->
  <!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
  <!-- <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script> -->
  <style>
    body{
      margin: 0;
    }
    .container{
      width: 100%;
    }
    .img-area{
      margin-top: 40px;
      text-align: center;
      min-height: 400px;/* 预设一个高度，使得IntersectionObserver效果不打折扣 */
    }
    .to-top-wrap{
      background-color: skyblue;
      font-size: 26px;
      color: white;
      text-align: center;
      padding: 12px;
      max-width: 69px;/* 字体26px，两行显示时，内容高度是69px，因此设置为和高度一样 */
      cursor: pointer;
      position: fixed;
      bottom: 150px;
      right: 80px;
    }
    .to-top-wrap:hover{
      background-color: deepskyblue;
    }
  </style>
</head>
<body>
<main class="container">
  <section class="img-area">
    <img class="my-photo" class="my-photo" data-src="./imgs/img1.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img2.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img3.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img4.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img5.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img6.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img7.png" />
  </section>
  <section class="img-area">
    <img class="my-photo" data-src="./imgs/img8.png" />
  </section>
</main>
<div class="to-top-wrap">
  回到顶部
</div>
<script src="./加载更多+回到顶部-observer.js"></script>
</body>
</html>

JS

JS参照网上的demo写就行，不会踩坑。和我之前的实现方案（传送门）的码量相比，少太多了，可惜兼容性差一些。

"use strict";

let io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return
    const img = entry.target
    img.src = img.dataset.src
    io.unobserve(img)
    console.log(img)
  })
})

let imgs = document.querySelectorAll('.my-photo')
imgs.forEach(img => {
  io.observe(img)
})

let toTop = document.querySelector('.to-top-wrap')
toTop.addEventListener('click', () => {
  document.documentElement.scrollTop = 0
})

参考：https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

hans774882968

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用IntersectionObserver实现图片懒加载

使用IntersectionObserver这个api可以更简便地实现图片的懒加载。它是浏览器原生提供的构造函数，它的用法网上也不少，且不容易踩坑。值得注意的是，如果图片没加载时默认高度为0，那么这个懒加载效果就会打不少折扣，这个折扣程度和前几张图片的高度有关。比如我本地如果不开console（底部），刚进入页面就会一次性全部加载。开console并拉到占据大部分高度的位置，才能让它刚进入页面时，只加载2张图片。所以我们为.img-area预设了一个min-height。HTML+CSS<!DO
复制链接

扫一扫