Как показать потрясающий слайдер HD-изображений, не замедляя работу вашего сайта?

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

Поэтому я работал над этим, чтобы не замедлять работу ее веб-сайта для людей, а также для Google или другой поисковой системы.
Цель состоит в том, чтобы сначала загрузить изображения с низким разрешением, чтобы ваши страницы загружались быстрее. Как это работает :

  • 1 : Загрузить изображения с низким разрешением.
  • 2: Затем он загружает изображения с высоким разрешением на фоне одного за другим.
  • 3: Когда изображение загружается с высоким разрешением, src обновляется, чтобы показать изображение с высоким разрешением.

Вот на этом скриншоте мы видим, что красная линия — это конец загрузки нашей страницы. Эти две строки представляют собой изображения с высоким разрешением, которые загружаются одно за другим на фоне после загрузки нашей страницы.
Это работает! :)

Хитрость

Я загружаю изображение как блоб в фоновом режиме один за другим

getImageData64(imageUrl: string): Observable<Blob> {
  return this.http.get(imageUrl, { responseType: 'blob' });
}

Затем после того, как я просто изменю источник фонового изображения на новый с полным разрешением.

loadImageSrc(i: number) {
  this.hdSliderService.getImageData64(this.items[i].highSrc)
    .subscribe(
      (res: Blob) => {
        const reader = new FileReader();
        const _this_ = this;
        reader.onloadend = function() {
          _this_.items[i].highSrc = reader.result;
          _this_.onLoaderImageLoaded(i);
          _this_.loadImagesHighRes(i + 1);
        }.bind(this);
        reader.readAsDataURL(res);
      }
    );
}

Улучшения

  • добавить новый параметр для изменения времени между слайдами
  • поместите стрелку, чтобы вручную изменить слайд

Заключительное слово

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

Загрузите его здесь

Установка Npm
npm i --save hd-slider-lib

Страница Npm: https://www.npmjs.com/package/hd-slider-lib
Страница Github: https://github. com/macfleid/angular-hd-slider