Если изображения установлены для отображения: нет, они все еще загружаются?

Если вы спрячете изображение, установив свойство отображения на none, браузер все еще загружает этот файл изображения через HTTP-запрос? Поскольку у меня есть список изображений, их свойство отображения установлено на none, за исключением первого изображения, которое является изображением по умолчанию. Как только пользователи нажмут на следующую кнопку, я хочу показать изображение 2 и установить для свойства отображения для других изображений значение none. Я прошу это сделать мой сайт быстрее.

Ответ 1

Рабочая демонстрация jsFiddle

Да, изображение загружено. Одним из решений является использование другого атрибута src:

<img data-src="http://placekitten.com/300/300?" />
<img data-src="http://placekitten.com/400/400?" />
<img data-src="http://placekitten.com/500/500?" />

Затем, когда вы хотите показать один из них, просто установите src атрибут его к data-src:

// showing the second one
var $img = $('img').eq(1);
$img.attr('src', $img.attr('data-src'));

Затем его загружается.

фонового изображения

Рабочая демонстрация jsFiddle

Другое решение использует background-image вместо тега img, в этом случае он не будет загружен, пока не станет видимым:

<div class="div-as-image" style="background-image: url(http://placekitten.com/300/300?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/400/400?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/500/500?);"></div>

И в вашем CSS:

.div-as-image {
    width: 500px;
    height: 100px;
    display: none;
}

Теперь, если вы сделаете один из них видимым, его изображение загрузится:

// showing the second one
var $div = $('.div-as-image').eq(1);
$div.css('display', 'block');

Этот метод не работает в Chrome, так как он загружал элементы background-image on none.

Ответ 2

Да. Изображение загружено, оно просто не видно из-за правила CSS.

Ответ 3

Немного поздно, но я бы рекомендовал использовать Lazy Load Plugin для jQuery Мика Туупола (по крайней мере, то, что я собираюсь делать).

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

Godspeed.

Ответ 4

Кажется, вы можете установить background: none;, чтобы предотвратить загрузку background-image. См. Jsfiddle: http://jsfiddle.net/Grsmto/7d15fuhm/4/

Протестировано в Chrome 39. Для Firefox 34 достаточно display: none;.

Изменить: пример обновлен

Ответ 5

Вы можете загружать изображения из папки с помощью ajax, а затем jQuery.load() для элемента img.