原生图片懒加载以及node起服务

最新推荐文章于 2025-04-17 09:55:40 发布

原创最新推荐文章于 2025-04-17 09:55:40 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍谷歌高版本浏览器支持的原生图片懒加载功能，只需在img标签中添加loading=lazy属性即可实现。但需注意，必须为图片设置宽高，否则懒加载将失效。文章提供了一个示例代码，并附上了查看demo的方法。

谷歌高版本浏览器支持原生图片懒加载

只需要加上一个loading="lazy"属性

	<img src="./images/1.png" alt="" loading="lazy">

必须给图片设置宽高，不然不会懒加载，浏览器无法计算出当前浏览器高度需要预加载多少张照片
应该起服务查看，本地查看不行

git地址

相关代码已经上传到git上，如果需要查看demo，可直接clone查看

https://github.com/litCabbage/native-img-loading-lazy

参考链接（更详细可查看张鑫旭大神的文章）

https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

litCabbage

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

揭秘前端领域Webpack的懒加载技术

AI架构全栈开发实战笔记

05-10

1044

Webpack懒加载技术是现代前端性能优化的重要手段之一。理解懒加载的核心概念和技术价值掌握Webpack实现懒加载的多种方式学习如何在实际项目中应用懒加载优化性能了解懒加载的局限性和适用场景本文涵盖Webpack 4.x和5.x版本的懒加载实现，重点分析动态导入(Dynamic Import)技术。首先介绍懒加载的基本概念和Webpack的实现方式然后深入分析核心算法和实现原理接着通过实际案例展示具体应用最后探讨相关工具、资源和未来发展趋势懒加载(Lazy Loading)

【云原生】Prometheus 服务自动发现使用详解

congge

07-21

7512

Prometheus服务自动发现使用详解

参与评论您还未登录，请先登录后发表或查看评论

图片懒加载和node中express框架搭建本地服务器

OriginalMIxss的博客

09-20

277

一搭建本地服务器 Node express框架构建简单本地服务器 var express = require('express') var path = require('path') var app = express() app.get('/', (req, res)=>{ res.send('Hello world'); }); app.get('/p1.jpg', function (req, res, next) { res.sendFile(path.join(__d

js图片加载优化之----懒加载

老猿阿浪的博客

08-08

654

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ width: 1000px; height: 600px;

实现图片懒加载(throttle, debounce)

weixin_33860553的博客

03-21

175

很早之前就想去实现一些功能,最近时间比较多就试试,本人是菜鸟- -大佬轻点 懒加载 /** * 图片懒加载 * @parma imgItems {node[]} DOM节点 * @returns {boolean} 可改进为promise方法 */ function lazyLoad(imgItems) { let _fnScrollTop = window.scrollY; ...

前端性能优化 --- 懒加载&预加载

帕尼尼的博客

08-29

696

前端性能优化学习笔记四 懒加载 有些资源文件不需要在页面渲染时就缓存下来在电商网站中，一个页面可能很长，需要加载很多张图片，这时候可以利用懒加载的策略来处理：只缓存可视区域的图片，当页面下拉时，再加载新的图片。预加载有些资源文件页面渲染时并没有引用到但是需要预先缓存下来有这样一个情景：当某个图片hover时会变成另一张图片。而那张图片并没有被预先缓存下来，hover的一...

elementUI el-tree loadnode懒加载更新节点

a965412234的博客

09-16

2680

elementUI tree loadnode懒加载更新指定节点

Node 原生开发-SWIG 与 Node 开发工程化

jiegiser博客

04-17

777

Javascript 毕竟是脚本语言，在一些计算密集型，实时性要求高的产品中，采用 Native(主要是通过 c++)实现这些逻辑显得尤为重要。本文章主要讲解如何基于Swig来实现工程化的开发。

vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案

u012443286的博客

05-15

5256

对于vue项目而言，图片懒加载是一个常见的图片加载方案，可以优化用户体验，而vue-lazyload则是一个广泛使用的插件。对于某些业务场景，我们需要监听图片加载失败事件，而后进行相应的处理，然而无论是官方文档还是网络上的解决方案都不直观甚至有错误，开发者不经过一番探索，很难知道如何处理，甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索，所幸的是，发现该问题终究是能够解决的，现将相关解决方案分享如下。业务场景试想这样的场景：在img标签上，使用v-lazy绑定的图片的地址。图片的地址可能

Next.js优化教程：实现高效的懒加载策略

二进制的梦想

12-10

1144

在现代Web开发中，懒加载（Lazy Loading）是一种优化策略，可以显著改善页面性能。通过按需加载资源和组件，懒加载能够减少初始加载时间，提升首屏体验，并降低带宽消耗。Next.js内置了对懒加载的支持，使开发者能够轻松实现高效的资源管理。本文将深入探讨Next.js中的懒加载功能，讲解其原理、应用场景，以及最佳实践。无论是图像、视频，还是动态组件，都将包含在我们的讨论范围内。

el-tree loadNode懒加载

m0_45382009的博客

12-24

2200

需要 lazy load 两个属性一起用 <el-tree :data="treeData" :props="defaultProps" :load="loadNode" @node-click="handleNodeClick" lazy> </el-tree> data() { return { treeDataList: [], defa

懒加载的原理及实现

热门推荐

Preeminent

01-13

6万+

懒加载的原理原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。代码实现既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首

图片懒加载/图片延时加载(封好的方法带注释可研究可直接使用)

mister、奎

06-30

1752

这是是一个封装好的图片懒加载的方法，为图片加上了一个渐现的动画（一开始拿js写的渐现，后来发现效果太差改用css来写的动画，渐现效果确实不错，不得不说c3的动画确实比js的流畅太多了，直接将方法和动画复制过去就可以调用，lazyLoad传入图片元素集合或者单张就可以了） /*图片懒加载动画*/ @keyframes c3 { 0%{opacity: 0.0} 50%{opacity...

安卓性能优化之懒加载（Fragment中数据的懒加载）

a_sid的博客

06-10

741

参考资料1 参考资料2 ，仿今日头条N个fragment懒加载

node js并发加载页面缓慢_详解如何利用前端Node模块zlib开启gzip压缩使页面加载速度更快...

weixin_39634508的博客

11-28

377

前言这篇文章我们来聊一聊Node的原生模块zlib，它的主要作用是压缩和解压缩数据，我们都知道数据在压缩后可以减小体积，在网络传输时提高传输速度和节约带宽！API用法zlib这个模块提供了很多的API，如下：图1如图1中，前9个都是解压缩的构造函数，并且它们都继承了transform流，所以当他们实例化后都可以使用流实现逻辑处理！接下来9个以create开头的方法就是将之前9个构造函数实例化，如下...

html5 页面 懒加载,实现图片懒加载(lazyload)的两种方式

weixin_29051245的博客

06-03

1573

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。图片懒加载的思路将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片...

爬虫实战---Selenium爬取懒加载页面

qq_39138295的博客

12-17

5260

爬取目标： https://sj.qq.com/myapp/category.htm?orgame=1&categoryId=122 网页结构分析：由于这个网站是懒加载页面。我们需要拖动滚动条，来让页面的内容加载出来。拖动滚动条的代码如下： target = self.browser.find_element_by_class_name('load-more-btn'...

手把手教你用Node.js爬虫爬取网站数据

公众号@极客密码

05-05

7792

个人网站https://iiter.cn程序员导航站开业啦，欢迎各位观众姥爷赏脸参观，如有意见或建议希望能够不吝赐教！开始之前请先确保自己安装了Node.js环境，还没有安装的的童鞋请自行百度安装教程...... 直接开始吧 1.在项目文件夹安装两个必须的依赖包 npm install superagent --save-dev SuperAgent(官网是这样解释的) ...

Android按需加载的实现-懒加载

漂泊的博客

03-03

1495

1.为什么需要懒加载出现？很多时候我们在做程序加载的时候会发现，有时候因为对象创建的顺序不一定，而导致在加载的时候出现null或者其他的异常所以就需要一种能够解决这种不确定的加载请求。2.解决问题的关键在哪里？ 1.请求先后 2.要满足一次请求任务3.例如懒加载的用例首先在创建的时候设置允许进行加载也就是第一个可加载条件 public void onView...

node懒加载是什么

最新发布

06-19

<think>我们正在讨论Node.js中的懒加载（LazyLoading）。懒加载是一种设计模式，它延迟了对象的创建、数据的计算或其他昂贵操作的执行，直到真正需要它们的时候。在Node.js中，懒加载通常用于模块加载、资源初始化等场景，以提高应用的启动性能和减少不必要的资源消耗。###Node.js懒加载定义懒加载（LazyLoading），也称为延迟加载，是一种将资源的加载或初始化推迟到实际需要时才执行的策略。在Node.js中，懒加载常用于模块系统，即只有在真正使用到某个模块时，才去加载和执行该模块的代码。这与Node.js默认的同步加载方式（在require时立即加载并执行整个模块）形成对比。###懒加载实现方式在Node.js中实现懒加载主要有以下几种方式：####1.使用函数封装将需要懒加载的模块放在一个函数内部，通过调用该函数来触发加载。这样，模块的加载会延迟到函数被调用时。```javascript//懒加载函数封装示例functionlazyLoadModule(){//在需要时才加载模块constmodule=require('./module');returnmodule.doSomething();}//当调用lazyLoadModule时，才会加载'./module'模块lazyLoadModule();```####2.结合`import()`动态导入（ES模块）在Node.js中支持ES模块后，可以使用`import()`函数进行动态导入，实现懒加载。`import()`返回一个Promise，可以在需要时异步加载模块。```javascript//动态导入示例（异步懒加载）asyncfunctionuseLazyModule(){constmodule=awaitimport('./module.mjs');//注意：动态导入适用于ES模块module.doSomething();}useLazyModule();```####3.使用代理或工厂模式通过代理对象或工厂函数来封装模块的加载，在第一次访问时加载模块并缓存。```javascript//工厂模式实现懒加载functioncreateLazyModule(){letmoduleCache=null;return{doSomething:function(){if(!moduleCache){moduleCache=require('./module');}returnmoduleCache.doSomething();}};}constlazyModule=createLazyModule();//直到调用doSomething时，才会加载模块lazyModule.doSomething();```####4.使用`Object.defineProperty`通过`Object.defineProperty`在对象上定义getter，当访问属性时才加载模块。```javascriptconstlazyLoader={getmodule(){//当访问module属性时，加载模块if(!this._module){this._module=require('./module');}returnthis._module;}};//当访问lazyLoader.module时，才会加载模块lazyLoader.module.doSomething();```###懒加载的优势与注意事项**优势**:-提高应用启动速度：避免在启动时加载所有模块。-节省资源：只加载实际使用的模块，减少内存占用。-按需加载：特别适用于大型应用中某些可能不会立即使用到的功能。**注意事项**:-避免过度使用：懒加载可能会导致运行时的性能波动（当首次加载模块时）。-错误处理：懒加载的模块如果在加载时出错，可能会在应用运行时才暴露问题，需要妥善处理错误。-循环依赖：懒加载可能改变模块加载顺序，需注意循环依赖问题。###总结懒加载在Node.js中是一种优化技术，特别适合在大型应用或需要快速启动的场景中使用。开发者可以根据具体需求选择不同的实现方式。§§相关问题§§1.Node.js中懒加载和预加载（EagerLoading）的主要区别是什么？2.在Node.js中使用动态导入(`import()`)时有哪些注意事项？3.懒加载模式在哪些场景下最为适用？4.如何避免懒加载可能导致的循环依赖问题？</think>### Node.js懒加载详解 #### **定义** 懒加载（Lazy Loading）是一种延迟加载资源的策略，在Node.js中特指**推迟模块加载直到真正需要时执行**。这与默认的同步`require()`机制（模块在首次引用时立即加载）形成对比，核心目标是： 1. **优化启动性能**：减少初始化时的模块加载量 2. **降低内存开销**：仅加载实际使用的模块 3. **避免循环依赖**：动态加载可打破模块间的强依赖链 4. **按需加载**：特别适合大型应用中非核心功能模块[^1][^5] --- #### **实现方式** ##### **1. 动态`require()`封装** ```javascript // 懒加载工具函数 function lazyRequire(modulePath) { let module = null; return () => { if (!module) module = require(modulePath); return module; }; } // 使用示例 const getDbModule = lazyRequire('./database'); router.get('/data', () => { const db = getDbModule(); // 实际调用时才加载模块 db.query(...); }); ``` **原理**：通过闭包延迟执行`require()`，首次调用时加载并缓存模块[^5] ##### **2. ES动态导入（Node.js v12+推荐）** ```javascript // 异步懒加载 async function loadFeature() { const { advancedFeature } = await import('./advanced-feature.mjs'); advancedFeature(); } // 按条件加载 if (user.isPremium) { loadFeature(); // 仅高级用户触发加载 } ``` **优势**： - 原生支持ES模块 - 返回Promise实现异步加载 - 避免阻塞事件循环[^1][^4] ##### **3. 代理模式（Proxy）** ```javascript const lazyModule = new Proxy({}, { get(target, prop) { const module = require('./heavy-module'); return module[prop]; } }); // 实际访问属性时才加载 lazyModule.calculate(); ``` ##### **4. 工厂函数 + 缓存** ```javascript const loaders = new Map(); function loadModule(name) { if (!loaders.has(name)) { loaders.set(name, require(name)); } return loaders.get(name); } // 业务逻辑中动态调用 const utils = loadModule('lodash'); ``` --- #### **性能对比** | 加载方式 | 加载时机 | 内存占用 | 适用场景 | |----------------|------------------|----------|-------------------| | 标准`require()`| 初始化同步加载 | 高 | 核心基础模块 | | 懒加载 | 运行时按需加载 | 低 | 非核心/重型模块 | --- #### **最佳实践** 1. **重型库处理**：对如`ExcelJS`、`PDFKit`等大型库使用懒加载 ```javascript const generateReport = async () => { const excel = await import('exceljs'); // ...生成报表 } ``` 2. **路由级分割**：Web框架中按路由加载模块 ```javascript // Express示例 app.get('/admin', (req, res) => { import('./admin-panel').then(module => module.handler(req, res)); }); ``` 3. **避免陷阱**： - 循环依赖需用`module.parent`检测调用栈 - 动态导入路径需用`path.resolve()`处理相对路径 - 浏览器环境需配合Webpack等打包工具[^2][^3] ---