[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading
html5 The and with native loading Browser lazy
2023-09-14 08:59:14 时间
In this lesson, you'll learn how to use the loading="lazy"
attribute available on images and iframes to lazily load below the fold images, which saves bandwidth and increases the load time performance of web pages. You'll also learn how to prevent images from lazy loading if necessary, and how to add lazy loading to responsive images as well. Lazy loading is supported in Chrome 76, and will be available in the next version of Edge and has public signals of support from Firefox, and Safari as well.
<!DOCTYPE html> <style> img { border: 1px solid black; display: block; width: 400px; height: 1000px; } </style> <img loading="lazy" src="https://via.placeholder.com/400x1000"/> <img loading="lazy" src="https://via.placeholder.com/400x1001"/> <img loading="lazy" src="https://via.placeholder.com/400x1002"/> <img loading="lazy" src="https://via.placeholder.com/400x1003"/> <picture> <source media="(min-width: 100px)" srcset="https://via.placeholder.com/1200x3000"> <img loading="lazy" src="https://via.placeholder.com/400x1004"/> </picture> <img loading="lazy" srcset="https://via.placeholder.com/400x1005 400w, https://via.placeholder.com/800x2010 800w"/> <iframe loading="lazy" src="http://example.com" width="400" height="400"></iframe>
相关文章
- Web 3D机房,智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」
- k8s报错The connection to the server 192.168.X.X:6443 was refused -did you specify...?docker images镜像丢失
- 【学习笔记】HTML5
- HTML5 Canvas学习笔记
- ORA-22955: The cardinality parameter is not within the allowed limits ORACLE 报错 故障修复 远程处理
- ORA-28085: The input and output lengths of the redaction do not match. ORACLE 报错 故障修复 远程处理
- ORA-31691: The worker received message number string from the MCP, which is invalid. ORACLE 报错 故障修复 远程处理
- ORA-32342: The EXPLAIN_MVIEW facility failed to explain the materialized view statement ORACLE 报错 故障修复 远程处理
- ORA-46011: The value of the “selectPrivilege” element is too long. ORACLE 报错 故障修复 远程处理
- ORA-48486: The file [string] exceeds the maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-48929: The trace record size exceeded the max size that can be read [string] ORACLE 报错 故障修复 远程处理
- ORA-13619: The procedure argument string is greater than the maximum allowable length of string characters. ORACLE 报错 故障修复 远程处理
- ORA-13621: The task_or object string is marked as a template and cannot perform the requested operation. ORACLE 报错 故障修复 远程处理
- 纯HTML5 Canvas实现的饼图详解编程语言
- HTML5 DRM正式成为Web标准,EFF辞职抗议详解编程语言
- 高级HTML5 移动应用框架 Ionic v3.1.0 发布详解编程语言
- 高级HTML5 移动应用框架 Ionic v2.3.0 发布详解编程语言
- Exploring the Power of MongoDB: The Definitive Guide to Upgrading Arrays(mongodb更新数组)
- Exploring the Power of Linux: The Versatility and Potential of Aud Files(linux系统aud文件)
- Unveiling the Evolution of Linux: The Journey of the 0.11 Version(linux0.11)
- HTML5 语义元素
- HTML5之lang属性与dir属性的详解
- Nodejs+express+html5实现拖拽上传