Offline image not load

[roncallyt]

trafficstars

Hi,

I am taking the Detecting Offline Status class, but when I set the Throttling value to offline the website tries to load the resource "images/offline.png" and can't, because it is simulating offline mode.

To solve this I prefetch the image with a link tag in the header of the HTML pages, is this correct? or is there another way to do this?

[DrPuneetGaur]

I am facing the same issue.

[MarcNq]

This happens because browsers are becoming smarter, and now they may not download an image if it's in an element with style display: none as an optimisation (a bad one if you contemplate offline flows).

A simple fix is to change the style.css file to have this instead of the original:

#connectivity-status.hidden {
    visibility: hidden;
}

This worked for me in Chrome 99. I hope they don't start avoiding prefetch also for visibility: hidden elements.