Menu
Every responsive website development tutorial recommends using the display:none CSS property to hide content from loading on mobile browsers so the website loads faster. Is it true? Does display:none not load the images or does it still load the content on mobile browser? Is there any way to prevent loading unnecessary content on mobile browsers?
554
2 Answers. Show activity on this post. If you are asking about the css display: none then the answer is the video will still be loaded over the mobile network but it would not be visible to the end user.
There are two things you can do to fix an HTML image not showing up on the browser: Check the src path to of the <img> tag. Check the cache of the website on the production host.
Fun fact: <img> tags actually block your application load. If you have 100 images on your page, the browser will download all 100 of them before it renders your page.
display: none : hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents.
Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.
The image has a display:none style but its size may be read by the script. Chrome v68.0 does not load images if the parent is hidden.
You may check it there : http://jsfiddle.net/tnk3j08s/
You could also have checked it by looking at the "network" tab of your browser's developer tools.
Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.
If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
