Does `display:none` Really Stop Images from Loading?

Can "display:none" Prevent Image Loading?

In responsive web design, hiding unnecessary content on mobile browsers to enhance performance is a common practice. One approach involves using the "display:none" CSS property. Does this method indeed prevent image loading, or is the content still fetched despite the concealment?

Answer:

Modern browsers have become more intelligent in their resource management. Depending on the browser and version, image loading may be halted if it is deemed non-essential.

Specifically, browsers such as Chrome v68.0 detect hidden parent elements and skip image loading accordingly. This behavior can be verified through the browser's developer tools by inspecting the "network" tab.

However, if the image is displayed on the first screen without lazy loading, "display:none" may not fully prevent loading, although it will hide the image from view.

Alternatives to Prevent Image Loading:

To completely prevent unnecessary content loading, consider the following alternatives:

• Omit the IMG element: Simply avoid adding the IMG element to the HTML document.
• Set the image source to "data:" or "about:blank": These values do not trigger image loading.

Remember that "display:none" affects only visibility and does not fully prevent content retrieval. For true performance optimization, explore the alternative methods mentioned above.

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