Проблема угловой прокрутки Firebase в Chrome из-за изображений

Question

Angular 6: Для загрузки изображений требуется время в Chrome

Эта проблема связана именно с Chrome, а не с любым другим браузером.

Мы использовали Firebase в нашемproject, и использовал метод snapshotchange для извлечения изображения из углового проекта из того же самого, URL-адреса изображения были такими: https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6.Что-то не так, из-за чего изображение загружается очень медленно и экран становится пустым, когда мы прокручиваем вверх и вниз в браузере, здесь мы использовали «ngx-infinite-scroll».

Я также пробовалконкатенация расширения .jpg после изображения, но сценарий остается тем же.

Сначала я подумал, что проблема в размере изображения, который влияет на скорость загрузки, поэтому я заменил изображения на https://upload.wikimedia.org/wikipedia/commons/b/b9/Pizigani_1367_Chart_1MB.jpg большой размер изображения, но здесь сайт работает без проблем.

Но он не прокручивается плавно, когда URL-адреса изображений выглядят следующим образом https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6

Вот код для установки изображений в один элемент списка:

<div class="slider">
                      <div class="slideshow-container" id="{{works.id}}_" *ngIf="works.media">
                        <div class="imgSlides imgsss active" *ngIf="works.media.aFront != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.aFront}}" alt="front img" />
                            </div>
                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.bBack != undefined">
                          <div class="content">
                            <div>
                              <img src="{{works.media.bBack}}" alt="back img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.cLeft != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.cLeft}}" alt="left img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.dRight != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.dRight}}" alt="right img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.ePanoroma != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.ePanoroma}}" alt="panoroma img" />
                            </div>
                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.fDetail != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.fDetail}}" alt="detail img" />
                            </div>
                          </div>
                        </div>
                        <!-- arrow -->
                        <div *ngIf="works.imageCount>1">
                          <a class="next arrow-control" (click)="plusSlide(1,works.id + '_')"> <img src="assets/image/backward.png" alt="previous arrow" /> </a>
                          <a class="prev arrow-control" (click)="plusSlide(-1,works.id + '_')">  <img src="assets/image/forward.png" alt="next arrow" /> </a>
                        </div>
                        <p class="sold-btn" *ngIf="works.isSold">{{'Sold'}}</p>
                      </div>
                      <div class="slideshow-container" *ngIf="isEmptyObject(works.media)">
                        <div class="content">
                          <div [ngStyle]="{'background-image': 'url(' + defaultimg + ')'}" class="img-thumb"></div>
                        </div>
                      </div>

                      <div style="text-align:center;display:none;" class="bullets">

                      </div>
                    </div>

Вот видео проблемы:

https://drive.google.com/file/d/1Ipl-34rOE2ZcscF3jrPYw2C9WfgnA29U/view?usp=sharing

Answer 1

Нужно ли, чтобы изображения были приватными?

Кэширование изображений не включено.Если вы проверите заголовки для изображения, которое они имеют Cache-Control: private.

Поскольку браузеру не разрешено кэшировать изображения, это может немного повлиять на производительность.

Потенциалисправить

Я бы предложил разрешить пользователю кэшировать изображения не менее часа.Вам нужно будет установить правильные заголовки кэша при загрузке изображений.Но вы можете легко с помощью googles gsutil установить заголовки для всех файлов в папке

Это то, что я использую: где в этом случае мы кэшируем изображения на 1 год и делаем их неизменяемыми, заставляя браузер всегда использоватькэшированная версия

gsutil -m setmeta -h "Cache-Control:public,max-age=31536000,immutable" 'gs://my-storage-bucket-name/myimagefolder/**/*.{jpg,png}'

Надеюсь, это может сделать приложение более производительным, но вам придется постараться узнать.