loading="lazy" 是用於 和

loading="lazy" is an HTML attribute you can add to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175130480555833.jpeg" class="lazy" alt="加載='懶惰”是什麼HTML屬性，它如何改善頁(yè)面性能？" > and <iframe></iframe> elements to enable native lazy loading in the browser. This means the resource won't load immediately when the page loads — instead, it waits until the user scrolls near it. It's a simple but effective way to improve performance without needing extra JavaScript.

How Lazy Loading Helps Performance

The main benefit of loading="lazy" is reducing initial page load time. When images or iframes are far below the fold (the part of the page visible without scrolling), loading them upfront just slows things down unnecessarily. By deferring their loading until they're needed, browsers save bandwidth and processing power.

• Less data usage for users, especially on mobile
• Faster initial load , which helps with perceived performance
• Lower server requests during page load

This works best on long pages with many images or embedded content.

Supported Elements: img and iframe

Right now, loading="lazy" applies directly to two elements:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" loading="lazy" alt="A nice landscape">
<iframe src="embed.html" loading="lazy"></iframe>

It doesn't work on other elements like <video></video> or custom components unless you handle lazy loading manually or via a script. Also, keep in mind that not all browsers support it fully, though most modern ones do.

When Not to Use loading="lazy"

There are some cases where you should avoid using this attribute:

• For images above the fold — delaying them might hurt performance or cause visual shifts
• For small icons or UI elements — the savings aren't worth the risk of a broken fallback
• If you already use a JavaScript-based lazy loading library — mixing both could cause conflicts

Also, don't assume everything will “just work.” Always test how your page behaves as users scroll, especially on slower networks.

A Few Gotchas to Keep in Mind

One thing people often overlook is that loading="lazy" isn't a magic bullet. You still need to follow good image practices like optimizing file size and setting dimensions. Otherwise, even with lazy loading, images may shift layout when they finally load.

Another point: if a browser doesn't support loading="lazy" , it just ignores it and loads the image normally. That's fine, but you might want to combine it with a polyfill or JS-based solution if you need broader control.

And remember, even though it's easy to use, always think about the user experience. Don't overdo it — some images are better off loading right away.

基本上就這些。

以上是加載='懶惰”是什麼HTML屬性，它如何改善頁(yè)面性能？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！