Как не загружать изображения в скрытых блоках?

158
20 октября 2018, 20:00

Есть скрытые блоки внутри которых много контента + изображений. Как можно сделать, чтобы изображения загружались только когда блок становился видимым?

<div class="hidden">
    <img src="path/to/img">
</div>

И в определенные моменты

$('.block').removeClass('hidden')
Answer 1
<div class="hidden">
    <img src="" data-src="path/to/img">
</div>

В момент удаления класса hidden пробегать по всем картинкам и менять значение src на путь из data-src.

const image = new Image()
image.src = $(this).attr('data-src')
image.onload = () => {
    $(this).attr('src', image.src)
}

В коде JQuery могут быть неточности, но суть, думаю, ясна. Можно изначально загружать в src превьюшку 10x10 пикселей и растягивать до нужной ширины. Это даст эффект размытого изображения.

Answer 2

Можно разбить изображения на блоки и вызывать их, когда вам надо, через load

READ ALSO
Как вывести данные JSON в аттрибут data-*

Как вывести данные JSON в аттрибут data-*

Есть загнанные в локальное хранилище данные (таблица):

146
Юнит тестирование асинхронного метода

Юнит тестирование асинхронного метода

Написал метод для тестирования входа в аккаунт:

148
Удаление временных файлов в Temp

Удаление временных файлов в Temp

Решил написать программу которая будет удалять временные файлы которые старше n-днейПрограмма файлы удаляет, но есть одно НО, те файлы которые...

146