zoukankan html css js c++ java

图片懒加载

目的：

节省流量，用户窗口没有看到这张图片时候不从服务器获取。

静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这就叫做“惰性加载”。

实现：

1. 通过web api，IntersectionObserver这个很方便。

2. 通过scroll事件监听结合获取dom调用getBoundingClientRect()判断top值就可知道是否进入视口，这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。

思路：

图片标签搞个默认的图片，rsrc或其他名称定义正确的图片地址，当图片标签出现在浏览器视口，src替换成rsrc的地址。

参考文档：

https://wangdoc.com/webapi/intersectionObserver.html#%E6%83%B0%E6%80%A7%E5%8A%A0%E8%BD%BD%EF%BC%88lazy-load%EF%BC%89

写法例子： // IntersectionObserver这个api学习，看文档

<!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>图片懒加载</title>
  <style>
    img {
      width: 50%;
    }
  </style>
</head>

<body>

  <div>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      rsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20170616%2F20170616170102_b86c160988b536fb116396593eb82f35_5.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=111f27373249d365ac6703ce6c176473"
      class="my_lazy_load">
  </div>

  <div style="height: 80vh;background-color: green;">

  </div>

  <div>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      rsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201303%2F21%2F104741kyuahhougue8ekvo.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=09ff3b37853d2b44720fd1a9b5df0bc8"
      class="my_lazy_load">
  </div>

  <div style="height: 80vh;background-color: green;">

  </div>

  <div>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      rsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      class="my_lazy_load">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      rsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F57a2b1ac9f386.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=be6affc850e3d94e4facf13e3e4d00d4"
      class="my_lazy_load">
  </div>

  <div>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbig5.wallcoo.com%2Fnature%2FHokkaido_summer_field%2Fimages%2FHokkaido_summer_field_picture_13652066_3511327.jpg&refer=http%3A%2F%2Fbig5.wallcoo.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=62fd7414d38aa949ee7ccb330631988a"
      rsrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F57a2b1ac9f386.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626925159&t=be6affc850e3d94e4facf13e3e4d00d4"
      class="my_lazy_load">
  </div>

  <script>

    let observer = new IntersectionObserver((entries, observer) => {
      for (let i = 0; i < entries.length; i++) {
        let ratio = entries[i].intersectionRatio
        console.log(parseInt(ratio * 100) + '%', entries);

        if (ratio > 0.2) {
          let target = entries[i].target
          target.setAttribute("src", target.getAttribute("rsrc"))
          target.setAttribute("rsrc", "")
          // 取消观察
          observer.unobserve(target)
        }
      }
    }, { threshold: [0.2] })

    for (let item of document.getElementsByClassName("my_lazy_load")) {
      observer.observe(item)
    }

  </script>

</body>

</html>

查看全文

相关阅读:
团队冲刺4
团队冲刺3
团队冲刺2
团队冲刺1
01大道至简阅读笔记
 03 梦断代码阅读笔记
 TOMCAT------>web资源访问
 Tomcat----->tomcat配置虚拟主机（搭建网站）mac
Linux中常用操作命令
 tomcat------->简单配置

原文地址：https://www.cnblogs.com/zezhou/p/14921295.html