反應如何強制隱藏的圖像加載渲染？

Question

我正在開發一個商店應用程序，它包含一個產品列表，當你點擊一個它會顯示一個幻燈片。

幻燈片顯示的作品是通過display:none;隱藏不是當前查看的圖像。所以你一次只能看到一個圖像，除非它們正在轉換（滑入和滑出）。

我遇到的問題是，反應似乎不會加載我的形象，除非它是可見的。所以當你第一次嘗試瀏覽幻燈片時，它必須加載每一個圖像，直到完成一輪。

有沒有辦法確保React在渲染時加載它們？我曾嘗試將每個圖像不透明度設置爲0以短暫時間，以使它們全部加載，但仍不會加載它們。只有當它們在屏幕上實際可見時。

感謝先進！

Answer 1

而不是「在渲染」，實際情況是他們（<img>標籤或background-image屬性）不呈現。 display: none/opacity: 0將被視爲「未呈現」，因此圖像將不會被加載。

此問題與HTML相比與React更相關。

要解決這個問題，請撥打TIMTOWTDI。

一種方法是將這些圖片包裝在樣式表設置爲overflow: hidden的<div>標籤中。圖像呈現在DOM中但對用戶不可見。這種方式工作容易，並與幻燈片更少和更小的圖片。

另一種方法是使用JavaScript和AJAX將圖片加載代碼並顯示在您的願望。代碼可以完全控制一切。 MDN - Using Fetch就是一個例子。這種方式效果更好，如果你有更多或更大的圖片，因爲你可以防止巨大的同時加載。