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

    К своему стыду я был постоянно уверен, что если картинке указать
    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. В данном случае я вынес ее стиль: при отключенном джаваскрипте пользователь сможет увидеть картинку (если вы об этом заранее позаботитесь).

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

    Метки: ,
  • 4 комментария

    1. 4 марта 2009

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

      Не загрузится только в Опере.

    2. Алексей
      20 июля 2009

      Mozilla(Linux) and Opera(Linux)-картинки не грузятся:)

    3. 31 июля 2009

      Мне кажется не стоит применять display:none, или если применять, то стараться использовать этот элемент как можно реже, т.к поисковика негативно могут отнестись к невидимым элементам страниц.

    4. Nikita
      13 февраля 2011

      этот способ не работает во всех версиях ie