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

Question

vvvadimos @vvvadimos

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

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

$(document).ready(function(){

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

});

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

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

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

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 3 часа назад
- 67 просмотров
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 3 часа назад
- 36 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 9 часов назад
- 89 просмотров
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- 14 часов назад
- 121 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 15 часов назад
- 36 просмотров
0

ответов
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- 16 часов назад
- 45 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 21 час назад
- 51 просмотр
2

ответа
JavaScript

Простой
Почему не правильно срабатывает условие в цикле?
- 1 подписчик
- 21 час назад
- 90 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Расскажите про паттерны работы с GraphQL?
- 7 подписчиков
- вчера
- 940 просмотров
1

ответ
JavaScript

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- вчера
- 59 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Скрипт python

26 дек. 2024, в 15:04

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

Тест c++

26 дек. 2024, в 14:50

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

Спинтакс шаблон

26 дек. 2024, в 14:40

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

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

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

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

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

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

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

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

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