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:
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.
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.