由于图像，Chrome中的Angular Firebase滚动问题

Question

Angular 6：图像在 chrome 中加载需要时间

这个问题专门在 chrome 中，而不是在任何其他浏览器中。

我们在项目中使用了 Firebase，并使用 snapshotchange 方法从同一个项目中获取图像到 Angular 项目，图像 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。

由于浏览器不允许缓存图片，可能会影响性能。

可能的修复

我建议允许用户将图像缓存至少一个小时。 上传图像时，您需要设置正确的缓存标头。 但是您可以通过谷歌gsutil 轻松设置文件夹中所有文件的标题

这是我使用的： 在这种情况下，我们将图像缓存 1 年并使其不可变，从而导致浏览器始终使用缓存的版本

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

希望这可以提高应用程序的性能，但您必须尝试了解。