Принудительная загрузка изображений в мобильных браузерах

#javascript #html #mobile

#javascript #HTML #Мобильный

Вопрос:

На моем веб-сайте у меня есть несколько изображений с обратным вызовом onload и onerror

 <img onload="imgCallback()" onerror="imgCallback()" class="article-img" src=":assets:/price/12-2.jpg" alt="A chart showing vitamin and mineral content of liver, kidney, spleen, heart, broccoli, kale, banana and apple" />
 

Некоторая инициализация выполняется только после загрузки всех изображений, потому что мне нужна полная высота элемента контейнера после отображения всех изображений.

Это отлично работает на моем рабочем столе, однако, похоже, не работает в некоторых мобильных браузерах. Я протестировал это в своем браузере Android Chrome, и, похоже, он лениво загружает изображения только после прокрутки достаточно далеко вниз, задерживая инициализацию страницы, которая, как ожидается, произойдет при начальной загрузке веб-сайта.

Я не могу придумать никакого другого способа решения этой проблемы, поскольку мне нужна полная ширина контейнера для загрузки изображений, чего я не знаю статически, поэтому я спрашиваю, есть ли способ сообщить браузеру, что он должен с нетерпением загружать изображения?

Ответ №1:

Нашел ответ здесь. Мне просто нужно было добавить loading="eager" к своим тегам изображения.