Lazy loading of first screen optimization

Lazy loading of first screen optimization

Lazy-Load. It is optimized for the timing of image loading: On some websites with a large amount of images (such as the homepage of e-commerce websites, or group buying websites, small game homepages, etc.), if we try to put all the image resources when the user opens the page After loading, it may cause a blank screen, freezes, etc., because there are too many pictures, and the browser can't handle so many tasks in one go!

purpose

The purpose of lazy loading is an optimized way to load pictures when the picture on the page enters the user's visible range.

It can increase the loading speed of the first screen. After all, the moment the user clicks on the page, only the first screen is presented to him. We only need to load the resource image of the first screen. As for the image below, when the user slides down, it will be the current position. When it is loaded, there is no problem when it is loaded, the performance pressure is also less, and the user experience has not deteriorated.

principle

When the page is initialized,
<img> picture src actually put data-src on the property when the element is in the visible range, put data-src assigned to src property, complete the picture loaded.

// 在一开始加载的时候
<img data-src="http://xx.com/xx.png" src="" />

// 在进入可视范围内时
<img data-src="http://xx.com/xx.png" src="http://xx.com/xx.png" />

Use the background image to achieve the same principle. Put background-image in the visible range and assign src data-src to complete the image loading.

// 在一开始加载的时候
<div
  data-src="http://xx.com/xx.png"
  style="background-image: none;background-size: cover;"
></div>

// 在进入可视范围内时
<div
  data-src="http://xx.com/xx.png"
  style="background-image: url(http://xx.com/xx.png);background-size: cover;"
></div>

Implement a lazy loading

Based on the above implementation ideas, implement a lazy loading by yourself.

Create a new index.html img tags for these pictures:

<head>
  <style>
    .img {
      width: 200px;
      height: 200px;
      background-color: gray;
      margin-bottom: 20px;
    }

    .pic {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<!-- 图片来自网络,侵删。 -->

<body>
  <div class="container">
    <div class="img">
      <!-- 注意我们并没有为它引入真实的src -->
      <img
        class="pic"
        alt="加载中"
        data-src="https://tse1-mm.cn.bing.net/th/id/OIP.8OrEFn_rKe82kqAWFjTuMwHaEo?pid=Api&rs=1"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://ssl.tzoo-img.com/images/tzoo.94911.0.910013.seoul-nami.jpg?width=1080"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://tse4-mm.cn.bing.net/th/id/OIP.ZitgAuABnwkrGn4lid2ZmQHaEK?pid=Api&rs=1"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="http://pic34.photophoto.cn/20150315/0034034862056002_b.jpg"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="http://img.mp.sohu.com/upload/20170724/32d4409f34194b029ed287abf1c99b70_th.png"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://pic6.wed114.cn/20180829/2018082910075991913520.jpg"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://tse4-mm.cn.bing.net/th/id/OIP.PZdPKj3sXEX2jLrepx3MUwHaEo?pid=Api&rs=1"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://pic6.wed114.cn/20180829/2018082910075831439349.jpg"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://pic6.wed114.cn/20180829/2018082910075468043336.jpg"
      />
    </div>
    <div class="img">
      <img
        class="pic"
        alt="加载中"
        data-src="https://tse2-mm.cn.bing.net/th/id/OIP.CRYz5Bv4vylsMh83G4CsLgHaFj?pid=Api&rs=1"
      />
    </div>
  </div>
</body>

In the implementation of lazy loading, there are two key values: one is the current viewable area of , 1607d318154bfe, and the other is element from the top of the viewable area, .

current highly visible area , in modern browsers and above IE9 browser, you can use window.innerHeight property acquisition, use low versions of IE document.documentElment.clientHeight get, here we are compatible in both cases:

const viewHeight = window.innerHeight || document.documentElement.clientHeight;

And the element from the top of the visible area is . Here we use the getBoundingClientRect() method to get the size of the returned element and the position relative to the size. For this API, MDN’s explanation is:

The Element.getBoundingClientRect() method returns the size of the element and its position relative to the viewport.

top attributes is the height relative to the top of the visible area, which is the 0607d318154c8f attribute, which is exactly the distance between the element we need and the top.

In this way, both attributes are obtained.

We use , the height of the current viewable area, greater than or equal to , the height of the element from the top of the viewable area, to determine whether the element has entered the viewable range:

<script>
  // 获取所有的图片标签
  const imgs = document.getElementsByTagName("img");
  // 获取可视区域的高度
  const viewHeight =
    window.innerHeight || document.documentElement.clientHeight;
  // num用于统计当前显示到了哪一张图片,避免每次都从第一张图片开始检查是否露出
  let num = 0;

  function lazyload() {
    console.log("滚动...");
    for (let i = num; i < imgs.length; i++) {
      // 用可视区域高度减去元素顶部距离可视区域顶部的高度
      let distance = viewHeight - imgs[i].getBoundingClientRect().top;
      // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度,说明元素露出
      if (distance >= 0) {
        // 给元素写入真实的src,展示图片
        imgs[i].src = imgs[i].getAttribute("data-src");
        // 前i张图片已经加载完毕,下次从第i+1张开始检查是否露出
        num = i + 1;
      }
    }
  }

  // 防抖函数
  function debounce(fn, delay = 500) {
    let timer = null;
    return function (...args) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.call(this, args);
      }, delay);
    };
  }

  // 是的页面初始化是加载首屏图片
  window.onload = lazyload;
  // 监听Scroll事件,为了防止频繁调用,使用防抖函数优化一下
  window.addEventListener("scroll", debounce(lazyload, 600), false);
</script>

Image Lazy Loading-Online Preview

summary

  • First collect all img in the page (you can also use class ).
  • Get the height of the view, calculate the displayed img , and avoid repeated assignment of src .
  • When sliding the mouse down, it will trigger the onScroll event (anti-shake), and then trigger the calculation of whether to assign src .

Reference


九旬的博客
关注我,每周输出一篇前端技术文章, 博客地址:[链接]

关注我,每周输出一篇前端技术文章,

927 声望
1.2k 粉丝
0 条评论
推荐阅读
前端图片压缩方案
先通过 js 中 img 构造函数,实例化 img 对象,后将图片的路径给转移到中,再建立一个 canvas 画布,后对画布进行各方面的数值的设置。

九旬1阅读 227

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

关注我,每周输出一篇前端技术文章,

927 声望
1.2k 粉丝
宣传栏