Есть функционал lazy loading, который возвращает <img>, если скролл добрался

Question

Есть функционал lazy loading, который возвращает <img>, если скролл добрался

до картинки и null, если нет.

Мне нужен какой-то колбэк или кастомное событие, чтоб знать, что картинка появилась и на нее можно повесить слушателя события "load". Подскажите пожалуйста, кто реализовывал подбоное, как это лучше сделать?

#frontend #javascript #programming #react.js #russian

0

12.10.2023

6 ответов

14 просмотров

Николай Шкарин

Так если сам <img в разметке доступен, то почему бы не использовать onLoad пропс?

0

12.10.2023

2^(82 589 933) − 1 Автор вопроса

Николай Шкарин
Так если сам <img в разметке доступен, то почему б...

Так он становится доступным в непредсказуемый момент. Изначально null, который в процессе скролла меняется на <img>, в этом и проблема.

0

12.10.2023

Николай Шкарин

2^(82 589 933) − 1
Так он становится доступным в непредсказуемый моме...

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API и обёртку на этот img или замещающий блок inView ? <img onLoad={}/> : <div/> Возможно не до конца понял что же хочется.

0

12.10.2023

2^(82 589 933) − 1 Автор вопроса

Николай Шкарин
https://developer.mozilla.org/en-US/docs/Web/API/I...

это уже реализовано

0

12.10.2023

Николай Шкарин

Николай Шкарин
https://developer.mozilla.org/en-US/docs/Web/API/I...

Или даже без observer'а можно на тот же <div/> вешать

0

12.10.2023