IntersectionObserver API и Lazy Load

@Drezor · Регистрация: 10.05.2016

Студворк — интернет-сервис помощи студентам

Всем здравствуйте.

Имеется проблема следующего характера: есть галерея с картинками в количестве 1600 штук и необходимо, чтобы отрабатывал lazy load с помощью IntersectionObserver - без сторонник библиотек.

Пример кода ниже

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function preloadImage(img)
{
        let imgDataSrcAttr = img.getAttribute('data-src');
    img.setAttribute("src", imgDataSrcAttr);
}
 
            let options = {
                root: null,
                rootMargin: "0px 0px 150px 0px",
                threshold: [0, 1]
            }
 
            let observer = new IntersectionObserver(
                (entries, self) => {
                    entries.forEach(entry => {
                        if(entry.isIntersecting){
                            preloadImage(entry.target);
                            self.unobserve(entry.target);
                        }
                    });
                }, options);
 
            let imgs = document.querySelectorAll('[data-src]');
            imgs.forEach(img => {
                observer.observe(img);
            });

Однако, как только я открываю страницу, все 1600 запросов отправляются на сервер, хотя только порядка 20 картинок видны на экране. Судя по моим ковыряниям, получается, что entry.isIntersecting всегда отбивает true и, естественно, срабатывает preloadImage() даже для тех картинок, которые вне "поля зрения" экрана.

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

Отсюда появляется вопрос: в каком месте, на примере кода выше, у меня все начинает сыпаться не в нужную мне сторону?

Благодарю за помощь

@Drezor · 01.12.2019, 12:11 **[ТС]**

Кажется, я нашел причину всех бед:display: flex для контейнера, который держит блок с картинками.

Насколько я понял, flex-wrap:wrap для JS не значит ровным счетом ничего и при загрузке страницы он видит картинки в один ряд, который без врапа должен бы уходить вправо - а благодаря врапу визуализируется красивая, побитая по рядам галерея

Тему можно закрывать...

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Drezor 2 / 2 / 1 Регистрация: 10.05.2016 Сообщений: 61
	01.12.2019, 12:11 [ТС]
	Кажется, я нашел причину всех бед:`display: flex` для контейнера, который держит блок с картинками. Насколько я понял, `flex-wrap:wrap` для JS не значит ровным счетом ничего и при загрузке страницы он видит картинки в один ряд, который без врапа должен бы уходить вправо - а благодаря врапу визуализируется красивая, побитая по рядам галерея Тему можно закрывать... 0