So, do background-images lazy-load with display:none? I did a quick test by loading this testpage created by Steve Souders on webpagetest.org. These are the results:
- IE9 loads the background image: http://www.webpagetest.org/result/121210_73_A2T/
- IE10 still loads the background image http://www.webpagetest.org/result/121210_D8_A3Y/
- Even Chrome loads the background image: http://www.webpagetest.org/result/121210_VZ_A4Z/
- Safari (on Windows) can’t help but downloading the background image: http://www.webpagetest.org/result/121210_QD_ABF/
- Turns out only Firefox does not load the friggin’ background image: http://www.webpagetest.org/result/121210_0R_A5E/
Conclusion: don’t rely on setting display:none on background-images to have them lazy load.