HTML5代码如何优化图片加载 HTML5代码中lazy-loading的实现-html教程-PHP中文网

HTML5代码如何优化图片加载 HTML5代码中lazy-loading的实现

蓮花仙者

发布： 2025-10-21 09:14:01

原创

997人浏览过

优先使用原生loading="lazy"实现图片懒加载，提升首屏性能；对于旧浏览器，采用Intersection Observer API结合data-src实现自定义懒加载；再配合srcset和sizes响应式属性，按设备加载合适图片，兼顾性能与兼容性。

html5代码如何优化图片加载 html5代码中lazy-loading的实现

在HTML5中优化图片加载，核心是提升页面性能、减少初始负载，尤其对含大量图片的网页尤为重要。其中，lazy-loading（懒加载）是一种关键策略，它让图片仅在用户滚动到其可视区域时才开始加载，从而加快首屏渲染速度、节省带宽。

使用原生 loading 属性实现懒加载

现代浏览器支持通过 loading="lazy" 属性实现图片和iframe的懒加载，无需JavaScript即可完成。

语法简单：

说明：

立即学习“前端免费学习笔记（深入）”；

loading="lazy"：延迟加载，直到接近视口时才请求资源
loading="eager"：默认行为，立即加载

该方式兼容性良好（Chrome、Edge、Firefox、Opera等主流浏览器均支持），推荐优先使用。

结合 Intersection Observer 实现自定义懒加载

对于需要兼容旧浏览器或更精细控制的场景，可使用 JavaScript 的 Intersection Observer API 来实现懒加载。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

基本思路：

将真实图片地址存放在 data-src 属性中
初始 src 使用占位图（如透明GIF）
当元素进入视口时，用 JavaScript 将 data-src 的值赋给 src

示例代码：

<img src="placeholder.gif" class="lazy"><br>
<script>
const images = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
</script>