原生TS实现图片懒加载

前端

2023-12-16 12:36:50

原生TS实现图片懒加载

图片懒加载是一种常见的优化网页性能的技术，通过延迟加载图片来避免浏览器在页面加载时加载所有图片，从而减少页面的加载时间。原生TS实现图片懒加载是一种使用原生TypeScript实现的图片懒加载解决方案。

原生TS实现图片懒加载的原理是：

将所有图片的src属性设为空，并在图片元素上添加data-src属性，data-src属性中保存图片的真实src。
使用IntersectionObserver API监听图片元素是否进入视口。
当图片元素进入视口时，将data-src属性中的值赋给src属性，开始加载图片。

原生TS实现图片懒加载的优点有：

易于实现：原生TS实现图片懒加载只需要编写少量代码，即可实现图片懒加载功能。
性能好：原生TS实现图片懒加载只在图片进入视口时才加载图片，因此可以有效地减缓页面加载时间。
兼容性好：原生TS实现图片懒加载兼容性好，支持大多数主流浏览器。

原生TS实现图片懒加载的缺点有：

需要浏览器支持IntersectionObserver API：如果浏览器不支持IntersectionObserver API，则无法使用原生TS实现图片懒加载。
可能存在兼容性问题：在某些浏览器上，原生TS实现图片懒加载可能存在兼容性问题。

原生TS实现图片懒加载的示例

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-lazy-load',
  templateUrl: './image-lazy-load.component.html',
  styleUrls: ['./image-lazy-load.component.css']
})
export class ImageLazyLoadComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    // 获取所有图片元素
    const images = document.querySelectorAll('img[data-src]');

    // 创建IntersectionObserver对象
    const observer = new IntersectionObserver((entries, observer) => {
      // 循环遍历图片元素
      entries.forEach(entry => {
        // 如果图片元素进入视口
        if (entry.isIntersecting) {
          // 将data-src属性中的值赋给src属性，开始加载图片
          entry.target.src = entry.target.getAttribute('data-src');

          // 取消监听该图片元素
          observer.unobserve(entry.target);
        }
      });
    });

    // 监听所有图片元素
    images.forEach(image => {
      observer.observe(image);
    });
  }

}