Самый простой способ НЕ грузить картинку в display none?

D
На сайте с 28.06.2008
Offline
1101
2140

Подскажите самый простой способ (минимум кода) не загружать картинку если у нее стиль display none?

Браузер тянет все что имеет <img src несмотря на стили - как это обойти?

suffix
На сайте с 26.08.2010
Offline
325
#1

Мопед не мой:

"using a <noscript> tag and placing the image inside the <noscript> tag. Then use javascript to remove the noscript tag as you need the image. In this way you can load images on demand using progressive enhancement."

Клуб любителей хрюш (https://www.babai.ru)
D
На сайте с 28.06.2008
Offline
1101
#2

А для тупых можно пример кода?

S
На сайте с 30.09.2016
Offline
469
#3

Не знаю, как там насчёт noscript, я могу только со скриптом предложить :D

$(document).ready(function(){

$('img').each(function(){if($(this).css('display')=='none')$(this).attr('src','blank.jpg');});
});
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
D
На сайте с 28.06.2008
Offline
1101
#4
Sitealert:
Не знаю, как там насчёт noscript, я могу только со скриптом предложить

Все равно будет запрос к blank.jpg - а вообще чтоб без запросов?

S
На сайте с 30.09.2016
Offline
469
#5

Ну можешь ничего не писать, просто две кавычки '' - но корректнее всё же однопиксельную картинку подгружать - она ничего не утянет, а браузеру приятнее будет, ИМХО.

D
На сайте с 28.06.2008
Offline
1101
#6

Sitealert, попробовал так, все равно грузится картинка

<script type="text/javascript">
$(document).ready(function(){
$('img').each(function(){if($(this).css('display')=='none')$(this).attr('src','');});
});
</script>
<div class="logo">
<a href="https://site.ru/"><img src="<?php echo $this->baseurl . '/templates/' . $this->template; ?>/images/logo.png" /></a>
</div>

Или он сработает если и стиль для дива тут же в коде будет?

SeVlad
На сайте с 03.11.2008
Offline
1609
#7
Dram:
Браузер тянет все что имеет <img src несмотря на стили - как это обойти?

Он тянет то, что прописано в srcset и/или picture, а при их отсутствии/несоответствии - уже в src.

Но странный вообще вопрос - удалить из кода если не нужна. Если же нужна при каких-то условиях - то надо говорить при каких.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
D
На сайте с 28.06.2008
Offline
1101
#8

Логотип скрыт для мобильной адаптивной версии, но картинка все равно грузится.

Пока использую src="data:image/png;base64 но шибко засран код, вот ищу более изящное решение.

SeVlad
На сайте с 03.11.2008
Offline
1609
#9
Dram:
Логотип скрыт для мобильной адаптивной версии, но картинка все равно грузится.

Вот его нужно выводить по "media" в десктопной версии

S
На сайте с 30.09.2016
Offline
469
#10
Dram:
попробовал так, все равно грузится картинка

Ну я написал для случая, когда display none установлен на момент загрузки документа - а как там на самом деле, я не знаю.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий