欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

懒加载

程序员文章站 2022-04-17 08:15:47
...

什么是懒加载

懒加载就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而补一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。

什么时候用懒加载

当页面需要一次性载入很多图片的时候需要用懒加载。

懒加载原理

我们都知道HTML中的<img>标签是代表文档中的一个图像标签

<img>标签有一个属性是src,用来表示图像的URL,当这个属性值不为空时,浏览器就会根据这个值发送请求,如果没有src属性,就不会发送请求

所以可以利用这一点:先不设置src,需要的时候再设置!!
我们先不给<img>设置src,把图片真正的URL放在另一个属性data-src中,在需要的时候也就是图片进入可视区域之前,将URL取出放入src中。

实现

HTML结构

<div class="container">
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img1.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img2.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img3.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img4.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img5.png">
  </div>
</div>

这时,<img>标签没有src属性的,只有alt和data-src属性。

alt属性是一个必需的属性,它规定在图像无法显示时的替代文本。
data-*全局属性:构成一类名称为自定义数据属性的属性,可通过HTMLElement。dataset来访问