Ленивая загрузка изображений карусели с помощью LazySizes

Я использую Lazysizes для lazyload карусели в моем приложении AngularJs.

Если я делаю lazysizes на изображениях, он работает, но мне не нравится эффект, потому что изображения загружаются в тот момент, когда пользователь нажимает кнопки со стрелками для изменения изображений, но есть несколько миллисекунд, изображение белого цвета при загрузке. Это код:

<div class="carousel slide">
                            <carousel interval="-10">
                                <slide ng-repeat="i in imagesList">
                                    <img data-src="image-url.jpg" class="lazyload"  />
                                </slide>                                    
                            </carousel>
                        </div>

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

<div class="carousel slide lazyload">
                        <carousel interval="-10">
                            <slide ng-repeat="i in imagesList">
                                <img ng-src="image-url.jpg" />
                            </slide>                                    
                        </carousel>
                    </div>

Я не знаю, как это сделать или если это возможно. Я думаю, что моя карусель происходит от бутстрапа 2.3.2

Ответы

Ответ 1

Если вы хотите прослушать событие, где загружаются все изображения в определенном компоненте, эта библиотека может помочь вам в этом - https://github.com/desandro/imagesloaded. Когда изображения загружаются, вы можете либо инициализировать, либо перезагрузить карусель.

$element.imagesLoaded( function() {
  // reload carousel
});

Иногда при загрузке карусели это также полезно, если вы ждете, пока ng-repeat завершит рендеринг перед инициализацией. Вы можете посмотреть здесь для объяснения:

fooobar.com/questions/387268/...

Ответ 2

Лучшим решением является использование небольших, размытых резервных изображений для src, наряду с data-srcset. То, что это делает, это загрузить небольшие превью на init и загрузить большие, когда они появятся. К тому времени, как они заканчиваются, вы увидите, что большое изображение обычно загружается и отображается, заменяя размытый палец. Даже когда эффект акцента заметен, он по-прежнему выглядит профессионально.

Здесь рабочий пример.
И здесь видеозапись с полосой пропускания сети дросселируется:
https://www.youtube.com/watch?v=mydnPTIc-4g&feature=youtu.be - качество было значительно уменьшено, когда я загрузил видео на youtu.be - я мало что могу с этим поделать, но вы можете четко заметить эффект в действии.

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

Типичный элемент выглядит следующим образом:

 <div class="item">
     <img src="./02-small.jpg"
          data-srcset="./02-medium.jpg 768w, 
                       ./02.jpg 1200w" 
          class="lazyload img-responsive" />
 </div>

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

С Angular это будет означать:

.carousel .img-responsive {
  min-width: 100%;
}

<div class="carousel slide">
  <carousel>
     <slide ng-repeat="i in imagesList">
        <img ng-src="./{{i.filename}}-small.jpg" 
             data-srcset="./{{i.filename}}-medium.jpg 768w,
                          ./{{i.filename}}.jpg 1200w" 
             class="lazyload img-responsive"
         />
     </slide>                                    
  </carousel>
</div>

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