Загрузка картинок по требованию

К своему стыду я был постоянно уверен, что если картинке указать
display: none, то она не загрузится. На одном из последних проектов убедился, что это совсем не так: почти во всех браузерах картинка загрузится.

Перепробовав кучу комбинаций HTML и CSS, остановился на таком решении:

<div style="display: none">
	<img src="empty.png" style="background-image: url(image1.jpg);" width="100" height="100" />
	<img src="empty.png" style="background-image: url(image2.jpg);" width="100" height="100" />
	<img src="empty.png" style="background-image: url(image3.jpg);" width="100" height="100" />
</div>

display: none нужно указывать именно у родителя, а не у самих картинок. Чтобы картинка в скрытом блоке не загружалось, нужно вынести ее из атрибута src. В данном случае я вынес ее стиль: при отключенном джаваскрипте пользователь сможет увидеть картинку (если вы об этом заранее позаботитесь).

Другие комбинации давали разный результат в разных браузерах: кто-то загружал, кто-то не загружал.