Как показать потрясающий слайдер 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); } ); }
Улучшения
- добавить новый параметр для изменения времени между слайдами
- поместите стрелку, чтобы вручную изменить слайд
Заключительное слово
Не стесняйтесь предлагать изменения в комментариях.
Надеюсь, это было полезно для вас.
Загрузите его здесь
Установка Npmnpm i --save hd-slider-lib
Страница Npm: https://www.npmjs.com/package/hd-slider-lib
Страница Github: https://github. com/macfleid/angular-hd-slider