Browser download test
The goal of this test is to see if browsers download content that will be hidden or not showed through CSS with or without media-queries involved.
Each test is represented the same way :
- An image is showed in HTML and hidden in CSS
- A Php script gets the number of hits of the image
- The browser eventually loads the file, adding 1 hit to its counter
- When the page is loaded, an Ajax calls re-counts the hits
If the pre-load and post-load counter match, it means that file didn't get downloaded by the browser, if the counter got incremented, it means that file actually got downloaded.
Inline display: none
- Pre-load
- 2094
- Post-load
- loading
Head Style display: none
- Pre-load
- 2038
- Post-load
- loading
External Style display: none
- Pre-load
- 2013
- Post-load
- loading
Background-image on display: none inline
- Pre-load
- 1519
- Post-load
- loading
Background-image on display: none head style
- Pre-load
- 1504
- Post-load
- loading
Background-image on display: none head external stylesheet
- Pre-load
- 1473
- Post-load
- loading
Background-image on display: none head media-query
- Pre-load
- 36
- Post-load
- loading
Background-image on display: none sheet media-query
- Pre-load
- 34
- Post-load
- loading
Credits
- http://www.flickr.com/photos/piez/529054439/sizes/m/in/photostream/
- http://www.flickr.com/photos/lambj/3471721865/sizes/m/in/photostream/
- http://www.flickr.com/photos/sausyn/234816240/sizes/m/in/photostream/
- http://www.flickr.com/photos/villes/3555150788/sizes/z/in/photostream/
- http://www.flickr.com/photos/tambako/3662685992/sizes/z/in/photostream/
- http://www.flickr.com/photos/sausyn/1536198368/sizes/z/in/photostream/
- http://www.flickr.com/photos/tommyhj/146236125/sizes/m/in/photostream/
- http://www.flickr.com/photos/fazen/17200735/sizes/m/in/photostream/