Does display:none prevent an image from loading?
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"
).
Why does `display: none` not load background image?
So I found this interesting because I didn't know about that. To conclude the image won't load if the item or one of its parents settings is display: none
. Is it because browsers get smarter? I don't think so. I tried the following:
#test1 {
display: none;
}
<div id="test1">
<img src="http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg"/>
</div>
Prevent images from loading
If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.
Edit 1: The script you referenced merely checks to see how far you've scrolled the page down and then determines which images are visible (or almost visible) by checking their top -- see the $.belowthefold and $.rightoffold extensions.
The example works great when the images are all the same size because their containers can also be the same size and you won't get any odd page resizing behavior when you lazy load them. If your images' heights and widths vary, you may get some odd results.
Edit 2:
<script type="text/javascript" charset="utf-8">
$(document).ready( function() { $("img").removeAttr("src"); } );
</script>
<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />
Does display:none keep elements from loading?
Would this work?
Nope. display: none
will only prevent the element from being displayed; it will be loaded nevertheless.
You can watch this happen in the element inspector of your choice (e.g. in Firebug or IE8's dev tools).
The best way is probably to create the Video element using JavaScript afterwards, or - if you want a fail-safe solution in case JS is turned off - you could use an iframe that loads the video if the user clicks a link.
Don't load hidden images
Here's a jQuery solution:
$(function () {
$("img").not(":visible").each(function () {
$(this).data("src", this.src);
this.src = "";
});
var reveal = function (selector) {
var img = $(selector);
img[0].src = img.data("src");
}
});
It's similar to your solution, except it doesn't use the fakeSrc
attribute in the markup. It clears the src
attribute to stop it from loading and stores it elsewhere. Once you are ready to show the image, you use the reveal
function much like you do in your solution. I apologize if you do not use jQuery, but the process should be transferable to whichever framework (if any) that you use.
Note: This code specifically must be ran before the window has fired the load
event but after the DOM has been loaded.
Related Topics
Why Can't an Element With a Z-Index Value Cover Its Child
What Does the CSS Rule "Clear: Both" Do
Css Child VS Descendant Selectors
Using CSS to Affect Div Style Inside Iframe
Why Do Browsers Create Vendor Prefixes For CSS Properties
Center an Element in Bootstrap Navbar
Truncating Long Strings With Css: Feasible Yet
How to Skew Element But Keep Text Normal (Unskewed)
Difference Between a Pseudo-Class and a Pseudo-Element in Css
How to Position Div Below Another Div
How to Force Browsers to Print Background Images in CSS
How to Remove Border of Drop Down List:Css
Advantages of Using Display:Inline-Block VS Float:Left in Css
How to Keep Two Divs on the Same Line
How to Create a Flexible Vertical Line in Between Two Divs