Как отложить загрузку фоновых изображений на «потом»?

Question

vvvadimos @vvvadimos

Как отложить загрузку фоновых изображений на «потом»?

хочу сделать, чтобы загрузка фоновых изображений элементов не включалась в общую загрузку страницы, т.е. чтобы этот индикатор загрузки на вкладке браузера не крутился, пока все все не загрузится. по сути это lazy load для фоновых изображений. мне бы только понять, почему код не работает:

$(document).ready(function(){

    var testElem = $(".test-container");
    
    if(testElem.length){
        testElem.addClass("loaded");
    }

});

класс .loaded добавляет стиль background-image к элементу.
не предлагайте пожалуйста готовые плагины

Вопрос задан более трёх лет назад
1014 просмотров

2 комментария

Подписаться 1 Оценить 2 комментария

Пригласить эксперта

Ответы на вопрос 1

12 комментариев

vvvadimos @vvvadimos Автор вопроса
количество проверяется чтоб не кидало ошибок на страницах где элемента нет, я понимаю что это с загрузкой никак не связано, не совсем уж дурной в js) но если честно не понял что значит "добавить интересующим блокам с фоном класс и снять его на $(document).ready. "

вы имели это ввиду?

$(document).ready(function(){ setTimeout(function(){ var testElem = $(".test-container"); if(testElem.length){ testElem.removeClass("loaded"); } }, 0); }); .test-container{ padding: 200px 0; height: 1000px; background-image: url("../images/test-img.png"); &.loaded{ background: none; } }

если да, то это не работает, если нет, напишите пожалуйста кусок кода
Написано более трёх лет назад
Константин Громов @Pathgk

vvvadimos: Имел ввиду это + в html поставить класс loaded изначально. Через js не получится добавить его до того как браузер начнёт загрузку. И ещё: jQuery работает так, что в данном случае, даже если он не найдёт .test-container, ошибки всё-равно не будет. Проверка лишняя.

Написано более трёх лет назад
vvvadimos @vvvadimos Автор вопроса

Константин Громов: в html я прописывал класс, не работает. я тут заметил что и функции lazyLoad не работают, если их выполнять сразу в коде, а не прикручивать к событию скролла, как это обычно делают. капец вообще

Написано более трёх лет назад

Константин Громов @Pathgk

vvvadimos:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<style>
			.test {
				width: 240px;
				height: 80px;
				background: url(https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png);
			}

			.test.lazy {
				background: none;
			}
		</style>
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
		<script>
			$(document).ready(function () {
				setTimeout(function () {
					$('.test').removeClass('lazy');
				}, 0);
			});
		</script>
	</head>
	<body>
		<div class="test lazy"></div>
	</body>
</html>

Этот код работает в актуальном хроме. В FF не нашёл троттлинга чтобы проверить.

Написано более трёх лет назад

vvvadimos @vvvadimos Автор вопроса

Константин Громов: не работает) я вставил специально картинку на 6мб, и проверяю на деве

Написано более трёх лет назад
Константин Громов @Pathgk

vvvadimos: Тогда я смогу помочь только имея дело с реальным проблемным кодом. В FF тоже работает.

Написано более трёх лет назад
vvvadimos @vvvadimos Автор вопроса

Константин Громов: специально ваш код взял и скопировал. prntscr.com/ejw58q prntscr.com/ejw52e prntscr.com/ejw4t3
у меня jquery и css подключен в head, файл с вашим скриптом внизу страницы перед

Написано более трёх лет назад
vvvadimos @vvvadimos Автор вопроса

прочитал на stackoverflow что если идет загрузка, и во время нее добавляется например скриптом какой-то ресурс, со браузер включает этот ресурс в общий первоначальный список загружаемых

Написано более трёх лет назад
vvvadimos @vvvadimos Автор вопроса

т.е. все будет работать только по событию onload, но это уже никакая не асинхронность, которой я хотел добиться

Написано более трёх лет назад
Константин Громов @Pathgk

vvvadimos: Завтра проверю. Возможно у меня работало из-за того, что DOMContentLoaded совпадал по времени с load из-за отсутствия других ресурсов.

Написано более трёх лет назад
Константин Громов @Pathgk

vvvadimos: Действительно, так и есть и работает не совсем предсказуемо. Думаю можно обойти, но явно потребуются какие-либо хаки с неудобными последствиями. Очень неоправданно ради 1 иконки.

Написано более трёх лет назад
vvvadimos @vvvadimos Автор вопроса

Константин Громов: вчера вот искал искал так и не нашел)

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Как решить ошибку Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')?
- 1 подписчик
- час назад
- 27 просмотров
2

ответа
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 2 часа назад
- 29 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 17 часов назад
- 80 просмотров
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 21 час назад
- 43 просмотра
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 22 часа назад
- 92 просмотра
0

ответов
JavaScript

Простой
По какой логике bind принимает только первый контекст?
- 1 подписчик
- 22 часа назад
- 94 просмотра
2

ответа
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 23 часа назад
- 34 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- вчера
- 36 просмотров
0

ответов
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- вчера
- 53 просмотра
3

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Помощь с версткой WPF/XAML

27 апр. 2024, в 16:39

1000 руб./в час

Паррсер-краулер на Go

27 апр. 2024, в 16:38

30000 руб./за проект

Юрист в IT для составления ответа на претензию и представления в суде

27 апр. 2024, в 16:36

6000 руб./за проект

Константин Громов: лоадер на вкладке пропал, т.е. страница как бы загрузилась, до того как картинка на фоне загрузится

Answer 1 · 2017-03-14 17:07:35

Ваш код работает так, что если на странице есть элементы с классом test-container, то он добавляет им класс loaded. Свойство length у jQuery-объектов содержит в себе кол-во найденных по селектору dom-элементов. Само их наличие никак не связанно с состоянием загрузки изображения, если элемент и есть img, или если в нём вложены другие img.

Самым примитивным решением будет добавить интересующим блокам с фоном класс и снять его на $(document).ready. Ещё после быстрой проверки в хроме стало понятно, что этого мало. Нужно ещё внутри ready обернуть код в setTimeout с задержкой 0 для асинхронности. Хотя, казалось бы, эвент готовности сам по себе асинхроннен.

Как отложить загрузку фоновых изображений на «потом»?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт