Как принудительно/запустить загрузку собственных ленивых изображений Wordpress без прокрутки?

Мне не нравится ленивая загрузка, потому что она выглядит довольно уродливо для пользователя с точки зрения UX. Тем не менее, я понимаю преимущества (более быстрая загрузка страниц, низкая пропускная способность, высокие показатели PageSpeed ​​и т. д.)

Я планирую написать код javascript, который будет:

Оставайтесь внизу › Дождитесь полной загрузки страницы › Через 3 секунды она заработает › Принудительно загрузите все изображения, которые ранее загружались отложенно во время начальной загрузки страницы

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

Вероятно, это будет выглядеть примерно так:

<script>
window.onload = function() {
    setTimeout(function(){ 
        var ForceLoadImages = document.createElement('script');
        ForceLoadImages.type = 'text/javascript';
        ForceLoadImages.src = 'link-to-the-script-to-force-load-images.js';
        document.body.appendChild(chatScript);
    }, 3000);
};
</script>

Я не специалист по js. Это был просто фиктивный пример, чтобы дать представление. Я специально спрашиваю, как написать содержимое этой части link-to-the-script-to-force-load-images.js. Будем признательны за любые материалы.

Был аналогичный вопрос здесь, но нужен ответ для Wordpress.


javascript wordpress lazy-loading pagespeed
person Onur    schedule 20.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я предполагаю, что ленивая загрузка wp использует атрибут data-src для хранения изображения, а когда он находится в порту просмотра, он добавляет изображение к атрибуту src.

Упрощенно так:

<img data-src="URL"/>

* если это не так, найдите в исходном коде атрибут, в котором изображение удерживается вне поля зрения.

Что вам нужно сделать, это выбрать все изображения и изменить data-src на src следующим образом:

var images = document.querySelectorAll('img');

window.onload = function() {
setTimeout(function(){ 
for (var i=0; i<images.length; i++) {
    if(images[i].getAttribute('data-src')) {
       images[i].setAttribute('src',images[i].getAttribute('data-src'));
       images[i].removeAttribute('data-src'); // optional if you need to remove data-src attribute after setting src
    }
}
}, 3000);
};
<div class="container">
<img data-src='https://picsum.photos/id/237/200/300' />
<img data-src='https://picsum.photos/seed/picsum/200/300' />
<img data-src='https://picsum.photos/200/300' />
</div>

person kaize    schedule 20.11.2020
comment
Спасибо! С небольшой модификацией у меня все заработало. На самом деле Wordpress помещает атрибут loading=lazy к изображениям во время загрузки страницы. Простое удаление этого атрибута сделало волшебство! Позвольте мне добавить это также к моему ответу. - person Onur; 25.11.2020

arrow_upward
1
arrow_downward

Я просто хотел поместить решение в качестве ответа (спасибо kaize), кто ищет что-то подобное. Он очень чистый и хорошо работает:

<script>
var loadimages = document.querySelectorAll('img');
window.onload = function() {
   setTimeout(function(){
      //Force Load images
      for (var i=0; i<loadimages.length; i++) {
         if(loadimages[i].getAttribute('loading')) {
            loadimages[i].removeAttribute('loading');
         }
      }
   }, 3000);
};
</script>

Для кого это? Для тех, кому не нравится ленивая загрузка изображений. Но применяя его из-за оценок PageSpeed.

Где разместить это? Разместите это внизу страницы.

Что делает этот скрипт? Этот скрипт запускается через 3 секунды после полной загрузки страницы. Он принудительно загружает все изображения, ожидающие попадания в область просмотра, для ленивой загрузки путем удаления атрибута загрузки. Таким образом, вы получаете хорошие показатели скорости страницы за отложенную загрузку изображений, сохраняя при этом лучший пользовательский интерфейс. (Имейте в виду, что вы теряете преимущество пропускной способности, связанное с концепцией отложенной загрузки)

person Onur    schedule 25.11.2020