react和vue图片懒加载及实现原理

devtools/2024/11/24 21:45:31/

一、实现原理

  1. 核心思想

    • 只有当图片出现在视口中时,才加载图片。
    • 利用占位图或占位背景优化用户体验。
  2. 实现技术

    • 监听滚动事件:监听页面滚动,通过计算图片与视口的位置关系,判断是否需要加载图片。
    • Intersection Observer(推荐):现代浏览器提供的 API,用于检测目标元素是否进入视口,比滚动事件性能更好。
  3. 步骤

    • 设置图片的占位符(如灰色背景、默认图片)。
    • 检测图片元素是否进入视口。
    • 当图片进入视口时,将 src 属性替换为实际图片地址。

二、React 实现图片懒加载

1. 使用 Intersection Observer 实现

.

import React, { useRef, useState, useEffect } from 'react';const LazyImage = ({ src, alt, placeholder, className }) => {const [isLoaded, setIsLoaded] = useState(false);const imgRef = useRef();useEffect(() => {const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {setIsLoaded(true);observer.disconnect(); // 图片加载后停止观察}},{ threshold: 0.1 } // 10% 进入视口时触发);if (imgRef.current) {observer.observe(imgRef.current);}return () => {if (observer && imgRef.current) {observer.unobserve(imgRef.current);}};}, []);return (<imgref={imgRef}src={isLoaded ? src : placeholder}alt={alt}className={className}/>);
};export default LazyImage;
2. 第三方库
  • react-lazyload:轻量级懒加载库,支持图片、组件等。
npm install react-lazyload
import React from 'react';
import LazyLoad from 'react-lazyload';const LazyImage = ({ src, alt, height }) => (<LazyLoad height={height} offset={100}><img src={src} alt={alt} /></LazyLoad>
);export default LazyImage;

三、Vue 实现图片懒加载

1. 使用 Intersection Observer
<template><img:src="isLoaded ? src : placeholder":alt="alt"ref="imageRef"class="lazy-image"/>
</template><script>
export default {props: {src: String,placeholder: String,alt: String,},data() {return {isLoaded: false,};},mounted() {const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {this.isLoaded = true;observer.disconnect();}},{ threshold: 0.1 });observer.observe(this.$refs.imageRef);},
};
</script>
2. 使用指令(全局注册)

懒加载在 Vue 中可通过自定义指令实现:

// directive-lazyload.js
export const lazyload = {mounted(el, binding) {const loadImage = () => {const imageElement = el;if (imageElement) {imageElement.src = binding.value;}};const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {loadImage();observer.disconnect();}});observer.observe(el);},
};

注册全局指令:

import { lazyload } from './directive-lazyload';
const app = createApp(App);
app.directive('lazyload', lazyload);

使用

<template><img v-lazyload="imageSrc" alt="Lazy loaded image" />
</template><script>
export default {data() {return {imageSrc: 'https://example.com/image.jpg',};},
};
</script>
3. 第三方库
  • vue-lazyload
npm install vue-lazyload
import VueLazyload from 'vue-lazyload';
app.use(VueLazyload, {loading: 'path/to/loading-image.png', // 占位图error: 'path/to/error-image.png',   // 错误图
});<template><img v-lazy="imageSrc" alt="Lazy loaded image" />
</template>

四、性能优化与注意事项

  1. 减少主线程开销:优先使用 Intersection Observer,避免滚动事件监听。
  2. 设置占位图:使用占位图片或颜色,避免加载空白区域影响体验。
  3. 图片格式优化
    • 使用 WebP 等高压缩比格式。
    • 根据设备和网络情况选择适配图片(如 srcsetpicture 标签)。
  4. 懒加载阈值:通过设置 offsetthreshold 提前加载,提高滚动时的视觉连续性。
  5. 服务器优化:开启图片的 lazy 属性,结合懒加载策略。

通过上述方法,React 和 Vue 都可以灵活实现高性能的图片懒加载功能。


http://www.ppmy.cn/devtools/136647.html

相关文章

在 Ubuntu 系统上安装 npm 环境以及 nvm(Node Version Manager)

在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;Node Version Manager&#xff09; 步骤 1: 更新系统包步骤 2: 安装 nvm步骤 3: 安装 Node.js 和 npm步骤 4: 设置默认 Node.js 版本&#xff08;可选&#xff09;总结 在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;No…

GitLab|数据迁移

注意&#xff1a;新服务器GitLab版本需和旧版本一致 在旧服务器执行命令进行数据备份 gitlab-rake gitlab:backup:create 备份数据存储在 /var/opt/gitlab/backups/ 将备份数据传输到新服务器的/var/opt/gitlab/backups/下&#xff0c;并修改文件权限&#xff08;下载前和上传…

Gate学习(6) 指令学习3

一、/particle/ 目录及其子目录下的命令 在 `/particle/` 命令目录及其子目录下,可以控制和管理粒子相关的属性和过程。以下是每个命令目录和命令的简要解释: ### `/particle/` 这是粒子控制命令的主目录,包括选择粒子、列出粒子名称、查找粒子编码、创建所有离子和同位旋等…

调大Vscode资源管理器字体

对于调整资源管理器字体大小&#xff08;也就是下图红框&#xff09;&#xff0c;查找了网上很多方法。要么介绍的方法是调整了代码字体&#xff0c;要么是调节了终端字体&#xff0c;要么是通过整体放缩实现的调整&#xff0c;总之都不合适。 唯一的调整方法是在几篇CSDN里看到…

大数据-231 离线数仓 - DWS 层、ADS 层的创建 Hive 执行脚本

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

HTML第七章 -- 内边距

1.内边距 <body><div class"divMax"><div class"div1">原型</div><div class"div2">对比</div></div> </body> <head><meta charset"UTF-8"><meta name"viewp…

MyBatis-数据库连接池、属性文件config.properties、类名简化、MyBatis的整体架构

一、数据库连接池 1、概述 存储实现创建好的连接对象的容器 2、优点 避免了频繁创建和销毁连接对象 3、使用 在使用到连接对象时可在数据库连接池中直接获取 4、实现 不需要我们去实现,框架和一些第三方有现成的组件&#xff08;C3P0、ADCP、德鲁伊(阿里巴巴)&#xff…

n、nvm、nrm、pnpm、yarn各种指令大全

n mac的版本管理工具&#xff08;可能与nvm冲突&#xff09; 安装 # 使用 npm / yarn npm i -g n yarn global add n # 使用 brew brew install n环境变量 export PATH"/usr/local/n/versions/node:$PATH"命令详解 版本查看 # 查看 n 版本 n --version/-V # 查…