Chus
|
![[*]](./images/xp/default_icon.gif) Сообщение от 18.2.10 в 17:12 |
|
|
Не загружать картинку, пока она не понадобится (CSS)
Оказывается на http://chusovitin.ru  картинки загружаются все
сразу в некоторых браузерах, а это 10 мегабайт меж тем!
Т.е. <div style="display:none">картинка</div> иногда все равно загружается, а это охуительно обидно!
Рещение нашел вот тут: http://chikuyonok.ru/2009/02/image-load-on-demand/ (ну,
всем известно, что Чикуёнок вообще охуенен ;))
| Цитата: |
К своему стыду я был постоянно уверен, что если картинке указать
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. В данном случае я вынес ее стиль: при отключенном джаваскрипте пользователь сможет увидеть картинку (если вы об этом заранее позаботитесь).
Другие комбинации давали разный результат в разных браузерах: кто-то загружал, кто-то не загружал.
|
Кардан
|
|
|
Chus
|
| Сообщение от 18.2.10 в 17:13 |
|
|
Осталось придумать, как подтягивать ширину и высоту картинки...
Кардан
|
|
|
|
