angular图片懒加载js实现方式有哪些

在web应用开发中,图片资源往往是影响页面加载性能的关键因素，尤其是当页面包含大量图片或高清大图时，一次性加载所有图片会导致页面渲染缓慢、用户体验下降，Angular作为主流的前端框架，提供了多种实现图片懒加载的方案，其中结合JavaScript（JS）实现的懒加载技术因其灵活性和可控性，成为开发者的常用选择，本文将详细介绍Angular中基于JS的图片懒加载实现原理、核心代码逻辑、优化策略及注意事项。

懒加载的核心原理

图片懒加载的本质是延迟加载非首屏可见区域的图片,只有当图片即将进入用户视口（Viewport）时，才触发其加载，这一过程的核心在于监听滚动事件或使用Intersection Observer API判断图片元素与视口的相对位置，当图片进入视口后，动态将占位符或空图片（属性设为空）替换为真实的图片地址（属性），相比传统的标签直接加载，懒加载能显著减少初始页面请求数量，降低带宽消耗和服务器压力。

基于Intersection Observer的实现方案

Intersection Observer是现代浏览器提供的原生API，用于异步监测目标元素与祖先元素或视口的交叉状态，相比传统滚动事件监听，它具有更高的性能和更低的资源消耗，以下是Angular中基于该API的懒加载实现步骤：

创建懒加载指令

在Angular中,可以通过自定义指令封装懒加载逻辑，首先使用 @Directive 装饰器定义一个指令，并在其中注入 ElementRef 和服务来操作DOM元素，核心代码如下：

import { Directive, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';@Directive({selector: '[appLazyLoad]'})export class LazyLoadDirective implements OnInit, OnDestroy {private observer: IntersectionObserver;private imgElement: HTMLImageElement;constructor(private el: ElementRef,private renderer: Renderer2) {}ngOnInit() {this.imgElement = this.el.nativeElement;// 设置初始占位图this.renderer.setAttribute(this.imgElement, 'src', 'placeholder.jpg');// 配置Intersection Observerthis.observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {this.loadImage();this.observer.unobserve(this.imgElement);}});}, {rootMargin: '50px' // 提前50px加载});this.observer.observe(this.imgElement);}private loadImage() {const realSrc = this.imgElement.getAttribute('data-src');if (realSrc) {const img = new Image();img.src = realSrc;img.onload = () => {this.renderer.setAttribute(this.imgElement, 'src', realSrc);};}}ngOnDestroy() {this.observer?.disconnect();}}

在模板中使用指令

在组件模板中,只需为需要懒加载的标签添加 appLazyLoad 指令，并通过属性存储真实图片地址：

传统滚动事件监听的实现方案

对于需要兼容旧版浏览器的场景,可以通过监听滚动事件实现懒加载，虽然性能略逊于Intersection Observer，但通过节流（throttle）技术可以优化性能：

创建懒加载服务

import { Injectable } from '@angular/core';import { fromEvent, Observable } from 'rxjs';import { throttleTime, map } from 'rxjs/operators';@Injectable({providedIn: 'root'})export class LazyLoadservice {private checkVisibility(): Observable {return fromEvent(window, 'scroll').pipe(throttleTime(200),map(() => {const images = document.querySelectorAll('img[data-src]');return Array.from(images).filter(img => {const rect = img.getBoundingClientRect();return rect.top < window.innerHeight && rect.bottom > 0;});}));}loadImages(images: Element[]) {images.forEach(img => {const imageElement = img as HTMLImageElement;const src = imageElement.getAttribute('data-src');if (src) {imageElement.src = src;imageElement.removeAttribute('data-src');}});}}

在组件中调用服务

import { Component, OnInit, OnDestroy } from '@angular/core';import { LazyLoadService } from './lazy-load.service';import { Subscription } from 'rxjs';@Component({selector: 'app-image-gallery',template: `
`})export class ImageGalleryComponent implements OnInit, OnDestroy {images = [{ url: 'image1.jpg', alt: 'Image 1' },{ url: 'image2.jpg', alt: 'Image 2' }];private subscription: Subscription;constructor(private lazyLoadService: LazyLoadService) {}ngOnInit() {this.subscription = this.lazyLoadService.checkVisibility().subscribe(visibleImages => {this.lazyLoadService.loadImages(visibleImages);});// 初始检查this.lazyLoadService.loadImages(document.querySelectorAll('img[data-src]'));}ngOnDestroy() {this.subscription.unsubscribe();}}

优化策略与注意事项

在Angular中实现图片懒加载,无论是基于Intersection Observer还是滚动事件监听，核心目标都是优化资源加载顺序，提升页面性能，Intersection Observer凭借其高效性和简洁性成为现代开发的首选，而滚动事件监听则在兼容性场景中发挥作用，开发者可根据项目需求选择合适的方案，并结合占位图、错误处理等优化手段，确保懒加载功能既高效又可靠，为用户提供流畅的浏览体验。