#javascript #image #lazy-loading
Вопрос:
Мне нравится отображать лениво загруженные изображения в моем веб-приложении с помощью loading="lazy" . Проблема, с которой я сталкиваюсь, заключается в том, что у клиента должен быть маркер с ограниченным временем для запроса изображений с сервера.
Если изображение прокручивается в окне просмотра, клиенту необходимо запросить маркер, и с помощью этого маркера клиент может запросить изображение. Для этого мне нужно, чтобы какое-то событие или триггер сработали до того, как браузер запросит лениво загруженное изображение.
Я не могу отправить токен с первым попаданием на страницу или где-то посередине, потому что я не знаю, как долго пользователь посещает другие части приложения, прежде чем изображения станут видны. Время варьируется от нескольких секунд до нескольких часов.
<img onload="doStuff()" /> запускается после загрузки изображения. Уже слишком поздно. Мне нужно кое-что до того, как будет запрошено изображение.
Я не ограничен в использовании изображений или loading="lazy" в решении этой проблемы. Любое обходное решение также приветствуется.
Комментарии:
1. Используйте это в качестве триггера, чтобы установить URL на «loading.jpg» когда вы получите токен, измените URL-адрес на правильное изображение (
img.src=good_image)2. Вы должны были справиться с событием loadstart , за исключением того, что Chrome по каким-либо причинам не поддерживает его в <img>… Таким образом, у вас остается либо изображение-заполнитель, как предлагает @Shanimal (это может быть однопиксельный gif, кстати), но вы можете столкнуться с некоторыми проблемами с кэшем (не знаете, к какой стратегии кэширования вы стремитесь, если пользователям нужен токен), либо вам придется повторно реализовать ленивую загрузку самостоятельно, используя сервер пересечений.
3. @Shanimal, если вам нужен рабочий фрагмент для вашего ответа: jsfiddle.net/ytjgavn3