Страница со 100 изображениями Загрузка

Question

У меня есть страница, где у меня есть слайд-шоу (bxslider) со 100 + изображениями, и при первом доступе к странице требуется больше 10 секунд для загрузки и даже после отображения страницы. Нет изображения. Только после перезагрузки страницы слайдер начинает работать. Я изменил размеры всех изображений на точно правильные размеры (как это было предложено компанией PageSpeed ​​Insight от Google), но время загрузки все еще слишком велико в первый раз. Я также пробовал с плагином Galleria, но не повезло. Ленивая нагрузка здесь не помогает, потому что изображения являются частью слайдера и не отображаются одновременно, я уже пробовал.

Так что мой вопрос в том, есть ли способ загрузки изображений только после того, как я обличу кнопки next/prev и не загружаю их все вместе при загрузке страницы.

Я хочу упомянуть, что в настройках bxslider параметр preloadImages установлен в visible, но это все еще не меняет время загрузки.

Любая помощь приветствуется. Спасибо

Answer 1

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

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

Если у вас есть 100 изображений, и вы хотите улучшить их, вы также должны предварительно загрузить несколько следующих изображений, на которые пользователь будет показывать.

$('.next, . prev').on('click', function(){ 
$('.slider .visible-images').attr('src', function(){ 
    return $(this).data('src'); 
}); 
}); 

Answer 2

Что вы должны сделать в этом случае, загружает первые 2 или 3 изображения слайда (так что вы можете быстро перейти к следующему или предыдущему слайду), а затем динамически загружать остальные изображения в виде вы перемещаете следующий или предыдущий слайд. (это все еще является своего рода ленивой нагрузкой, не основанной на прокрутке, а на активном слайде)

Необходимо определить, в каком слайде вы находитесь, и соответственно загрузить следующие/предыдущие или следующие/предыдущие 2.

Таким образом, сайт будет загружен быстро (так как вам нужно будет загрузить только 3 изображения), а остальное будет загружаться только при необходимости.

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