Does `display:none` Really Prevent Image Loading?

Impact of "display:none" on Image Loading

Many responsive website development tutorials suggest using the "display:none" CSS property to conceal content from appearing on mobile browsers, thereby speeding up website loading times. However, does "display:none" truly prevent images from loading?

Does "display:none" Stop Image Loading?

Browsers have become more sophisticated. Today, depending on its version, your browser may refrain from loading an image if it determines its irrelevance.

While an image may have a "display:none" style assigned, its dimensions can still be accessed by scripts. In cases where the parent element is hidden, Chrome version 68.0 omits image loading.

Alternatives to "display:none"

If you specifically want to prevent image loading, consider the following techniques:

• Omit the IMG element from the document.
• Set the IMG src attribute to "data:" or "about:blank."

Limitations of "display:none"

"display: none" may not be effective for images displayed on the initial screen and not lazy loaded. The image will load but will not be visible.

The above is the detailed content of Does `display:none` Really Prevent Image Loading?. For more information, please follow other related articles on the PHP Chinese website!