[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading
html5 The and with native loading Browser lazy
2023-09-14 09:00:48 时间
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>
相关文章
- 分享原创漂亮大气视频列表模板【html5】
- html5实现移动端下拉刷新(原理和代码)
- HTML5触摸事件(touchstart、touchmove和touchend) (转)
- 【HTML5】Video + DOM
- [HTML5] Native lazy-loading for the web
- [HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)
- [HTML5] Show Different Variations of Images Depending on the Viewport Width using Art Direction
- [HTML5] Show Images of Differing Resolutions Depending on the Viewport Width with srcset
- [MODx] 1. Add Html5 template into the MODx
- 【HTML5】特性
- [HTML5] Native lazy-loading for the web
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- HTML5 图片上传预览(调用摄像头、文件)demo效果示例(整理)
- 〖大前端 - 基础入门三大核心之 html 篇⑦〗- div标签 与 HTML5特性
- 【CSS3】---- 纯 css 控制 html5旋转音乐图标,控制背景音乐