Откладывание изображений с использованием только JavaScript не устраняет предупреждение PageSpeed

Question

Чтобы отложить изображения, я реализовал решение, которое Патрик Секстон предлагает на своем сайте, но пока безуспешно!

Это не устраняет предупреждение "Приоритет видимого содержимого" в PageSpeed ​​Insights

Мой HTML это:

<img class="slideshow-item active"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
data-src="images/....jpg" 
width="1982" height="954" alt="1" title="1" />

Мой JS это:

function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

Answer 1

Техника, указанная в вашей статье Патрика Секстона, не совпадает с ленивой загрузкой изображений! при отложенной загрузке мы должны отслеживать положение прокрутки и загружать только те изображения, которые появляются. Но, как упоминалось в этой статье, метод, используемый здесь, только откладывает загрузку (указанных) изображений сразу после начальной загрузки страницы.

Другими словами, все изображения будут загружаться без взаимодействия с пользователем, но он будет пытаться загрузить только основной контент (например, html, css, js и важные изображения, к которым вы не применили их источник. data-src) и после них начните загружать остальные изображения.

Если вы знаете, что вы хотите реализовать, предупреждение PageSpeed ​​Insights не имеет значения для вашего случая. каждый метод имеет свои преимущества и применения. как написано в ссылочной статье, основным недостатком отложенной загрузки может быть:

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

в одностраничных приложениях основная навигация не переносит вас на другие страницы, а просто приводит вас в разные части одной и той же страницы. Ваша страница загружается, пользователь видит вашу основную навигацию, и если они нажимают, они попадают на часть вашей страницы, на которой еще не загружены изображения (что не очень хорошо).

предоставленная методика опускает такую ​​проблему.