HTML loading Attribute

Description

The loading attribute is an HTML attribute used to specify how a browser should load images and iframes on a webpage. It's designed to improve page load times and conserve bandwidth by instructing the browser on whether to load an image or iframe immediately or to defer its loading until certain conditions are met, such as when the element scrolls into the viewport. The attribute can take two values:

  • lazy: When set to lazy, the browser delays loading the image or iframe until it's about to enter the viewport. This behavior is beneficial for images and iframes that are off-screen at the time the page is loaded, as it allows the page to load faster by only loading visible content initially.
  • eager: Setting the loading attribute to eager instructs the browser to load the image or iframe as soon as possible, ignoring whether it's currently visible on the screen or not. This is the default behavior for images and iframes without a specified loading attribute.

Implementing the loading attribute is straightforward and only requires adding it to an <img> or <iframe> tag in the HTML code, like so:

<img src="example.jpg" loading="lazy" alt="An example image">

This attribute is particularly useful for improving the user experience on websites with many images or iframes, such as galleries or article pages, as it can significantly reduce initial load times and save data for users on limited bandwidth connections. However, it's important to ensure that critical images, such as logos or navigation icons, are set to load eagerly to avoid any impact on the usability of the site.

Syntax

<img loading="eager | lazy" />

Values

  • eagerSetting the loading attribute to eager instructs the browser to load the image or iframe as soon as possible, ignoring whether it's currently visible on the screen or not. This is the default behavior for images and iframes without a specified loading attribute.
  • lazyWhen set to lazy, the browser delays loading the image or iframe until it's about to enter the viewport. This behavior is beneficial for images and iframes that are off-screen at the time the page is loaded, as it allows the page to load faster by only loading visible content initially.

Applies To

The loading attribute can be used on the following html elements.

Example

<h1>Content above the fold</h1>

<img src="images/sunset.jpg" alt="Important Image" loading="eager">

<p>More content...</p>
<br><br>
<img src="images/pittsburgh.jpg" alt="Large Image" loading="lazy">

Browser Support

The following table will show you the current browser support for the HTML loading Attribute.

Desktop
Edge Chrome Firefox Opera Safari
7977756415.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
77795515.41277

Last updated by CSSPortal on: 28th March 2024