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

Question

vvvadimos @vvvadimos

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

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

$(document).ready(function(){

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

});

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

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

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

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 7 часов назад
- 62 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 12 часов назад
- 37 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 137 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 99 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 678 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 62 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)

25 нояб. 2024, в 03:04

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

Сделать простой лендинг

25 нояб. 2024, в 02:45

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

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

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

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

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

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

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

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

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

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

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