基于dataset的使用和图片延时加载的实现方法

2023年6月10日下午5:14 • JavaScript

为了给你更全面的介绍，我将分为两部分来解答你的问题。

基于 dataset 的使用

dataset是HTML5中新增的一个属性，用于为元素存储自定义数据。它可以为我们提供一种方便快捷的方式来访问元素存储的数据，而不需要通过其他的方式来操作元素的属性。

增加数据

<body>
  <div data-name="zhangsan" data-age="18"></div>
</body>

在上述HTML代码中，我们使用data-前缀来为div元素增加数据。其中，data-name存储的是张三的名字，data-age存储的是张三的年龄。

获取数据

我们可以使用HTMLElement.dataset来获取元素的自定义数据。

const div = document.querySelector('div');
const name = div.dataset.name;
const age = div.dataset.age;
console.log(name); // 'zhangsan'
console.log(age); // '18'

使用HTMLElement.dataset可以获取到元素的所有自定义数据，返回的是一个以data-前缀去掉的名称作为属性名的对象。另外，我们在获取数据的时候可以使用驼峰式的写法来获取元素的自定义数据。

示例说明

我们想要在页面中显示一组学生的信息。这里我们可以将每个学生的信息存储在一个div元素中，并使用dataset来管理每个学生的数据。

<body>
  <div class="student-info" data-name="zhangsan" data-age="18" data-gender="male"></div>
  <div class="student-info" data-name="lisi" data-age="19" data-gender="female"></div>
  <div class="student-info" data-name="wangwu" data-age="20" data-gender="male"></div>
</body>

为了在页面上显示学生的信息，我们可以使用以下代码。

const studentInfoList = document.querySelectorAll('.student-info');
studentInfoList.forEach(studentInfo => {
  const name = studentInfo.dataset.name;
  const age = studentInfo.dataset.age;
  const gender = studentInfo.dataset.gender;
  console.log(name, age, gender);
  // 'zhangsan' '18' 'male'
  // 'lisi' '19' 'female'
  // 'wangwu' '20' 'male'
});

图片延时加载的实现方法

当网页中包含大量的图片时，加载的速度会变得很慢，这时可以使用图片延时加载的方式来提升网页的性能和用户的体验。

延时加载技巧的原理是，当浏览器处理到图片时，如果图片未在视口中出现，则不加载图片，待图片进入视口后再进行加载。

实现方法

1. 增加占位符

在图片加载之前，可以先为占位符增加一个img元素，并设置它的宽度、高度、背景色等样式，以使得页面在没有加载图片时也不会出现样式上的错乱。

<img class="lazy-img" data-src="real-image.jpg" src="placeholder.jpg" width="400" height="400" />

上述代码中同时设置了一个data-src属性，用于存储真实图片的地址，src属性则用来占位。

2. 监听视口的滚动事件

监听窗口的滚动事件，当滚动到图片的位置时，进行加载操作。

const lazyImgList = document.querySelectorAll('.lazy-img');
lazyImgList.forEach(lazyImg => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const realImgSrc = lazyImg.dataset.src;
        lazyImg.setAttribute('src', realImgSrc);
        observer.unobserve(lazyImg);
      }
    });
  });
  observer.observe(lazyImg);
});

上述代码中使用了IntersectionObserverAPI来监听元素是否进入视口，当元素进入视口时，进行图片的真实地址和src属性的更新，并停止对元素的观察。

示例说明

下面示例中，我们实现了一个简单的图片延时加载的例子。其中，图片的真实地址存储在data-src属性中，并使用IntersectionObserverAPI来监听图片是否进入视口。

<body>
  <img class="lazy-img" data-src="https://picsum.photos/id/1082/800/800" src="https://via.placeholder.com/800" width="400" height="400" />
  <img class="lazy-img" data-src="https://picsum.photos/id/1069/800/800" src="https://via.placeholder.com/800" width="400" height="400" />
  <img class="lazy-img" data-src="https://picsum.photos/id/870/800/800" src="https://via.placeholder.com/800" width="400" height="400" />
</body>

const lazyImgList = document.querySelectorAll('.lazy-img');
lazyImgList.forEach(lazyImg => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const realImgSrc = lazyImg.dataset.src;
        lazyImg.setAttribute('src', realImgSrc);
        observer.unobserve(lazyImg);
      }
    });
  });
  observer.observe(lazyImg);
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于dataset的使用和图片延时加载的实现方法 - Python技术站