Does Display:None Keep Elements from Loading

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.

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").

Does 'display:none' improve or worsen performance?

The "display: none" property of an Element removes that element from the document flow.

Redefining that element display property from none to any other dynamically, and vice versa, will again force the change in document flow.

Each time requiring a recalculation of all elements under the stream cascade for new rendering.

So yes, a "display: none" property applied to a nonzero dimensional and free flow or relatively positioned element, will be a costly operation and therefore will worsen the performance!

This will not be the case for say position: absolute or otherwise, removed elements form the natural and free document flow who's display property may be set to none and back without triggering e re-flow on the body of the document.

---

Now in your specific case [see edited graph] as you move/scroll down bringing the 'display: block' back to the following div will not cause a re-flow to the rest of the upper part of the document. So it is safe to make them displayable as you go. Therefore will not impact the page performance. Also display: none of tail elements as you move up, as this will free more display memory. And therefore may improve the performance.
Which is never the case when adding or removing elements from and within the upper part of the HTML stream!

Does hiding a div load the information?

This question is similar to yours. Does display:none keep elements from loading?

The part that relates to your question is this ->

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.

Hope that helps!

display none Does it reduce load time, or are the items still loaded but not displayed

To answer your question, display: none does not reduce load time. It still loads the content/classes/code in question, but the browser doesn't display/render them.

It sounds like you're using a mobile-first approach, so you could either:

1. Load all assets/classes/scripts regardless of mobile/tablet/desktop class you're aiming for and adapt the layouts using your media queries.

   • This means all content (sprites et al) will be loaded by default even if they aren't used by certain device-types.
   • Content/layout will either be shown or hidden based upon media query rules.
     
     

2. Load the required assets/classes/scripts as and only when the media query states change. The advantage of this is that the experience would be more relative the the device-type in question:

   • More reactive/timely experience and loading of functionality
   • Potentially less bandwidth
   • A more tightly design experience for each device-type
   • Some assets (images/backgrounds etc) can be selectively loaded

If you consider looking at option 2, then there are a variety of open-source asset-loaders that allow you to load CSS and Javascript code based upon media query state changes. [Note: More effort/design would be required to use this technique].

A simplified example of this using enquire.js (there are others asset loaders) would allow you to do the following:

<script type="text/javascript">

  // MQ Mobile
  enquire.register("screen and (max-width: 500px)", {
      match : function() {
          // Load a mobile JS file
          loadJS('mobile.js');
          // Load a mobile CSS file
          loadCSS('mobile.css');
      }
  }).listen();

  // MQ Desktop
  enquire.register("screen and (min-width: 501px)", {
      match : function() {
          // Load a desktop JS file
          loadJS('desktop.js');
          // Load a desktop CSS file
          loadCSS('desktop.css');

      }
  }).listen();

</script>

So, if a browser is 501px or above in width, then both desktop.js and desktop.css would load - enabling features/assets that aren't available under 501px and that aren't required.

CSS Display:none - Does it still load all content inside the DOM?

in case of an html page, the entire page is served by the server when the request is made, then while rendering the browser simply hides it.

If you want a delayed loading you may have to look at AJAX technology.

Using ajax you can load the content as and when you need and then add it to the dom.

Instead of using the raw AJAX API provided by the browser, you can look at libraries like jQuery which provides cross platform support form making ajax calls and dom manipulations

Ex:

$.ajax({
    url: 'my-content-url',
    method: 'GET'
}).done(function(html){
    $('#my-container').html(html)
})

This example makes a ajax call to my-content-url and on successful completion, the returned html is added to the element with id my-container.

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" />

---

Related Topics