Fotorama滑塊 - 如何延遲加載圖像，然後卸載它們時不可見？

Question

因此，我在我的網站上使用fotorama.io，並且我在滑塊（60-80）中有大型圖像庫，因此我按照手冊中的建議使用Lazy Load一次性加載所有圖像。

但是，當我瀏覽圖像和已經達到了40+的圖像，我的瀏覽器的內存過載，瀏覽器開始響應速度很慢，我對Firefox的內存重新啓動插件，它顯示了我的記憶中建立非常高。

是否有使用延遲加載，並保持例如10張圖像，並卸載所有不可見的，或者是儘可能10+卸載圖像，使得存儲器被清除的方法嗎？

Answer 1

這是一個有趣的問題！我現在不是可以從內存卸載圖片，我認爲瀏覽器必須自動管理它。順便說一句，Fotorama分離不可見的圖像。我知道這是大型畫廊的最佳做法。

Answer 2

即使用JavaScript刪除圖像，瀏覽器也會加載圖像。在下面的例子中所有圖像將被馬上下載：

<div class="fotorama"> 
    <img src="1.jpg"> 
    <img src="2.jpg"> 
</div> 

如果您不擔心沒有JavaScript的瀏覽器，通過改變你的HTML開啓延遲加載：

<div class="fotorama"> 
    <a href="1.jpg"></a> 
    <a href="2.jpg"></a> 
</div> 

添加縮略圖：

<div class="fotorama"> 
    <a href="1.jpg" data-thumb="1_thumb.jpg"></a> 
    <a href="2.jpg" data-thumb="2_thumb.jpg"></a> 
</div> 

這裏的所有照片都使用這種圖像嵌入方法。

Answer 3

如果想延遲加載img標籤，只需將寬度和高度。

例子：

<div class="fotorama" width="360" and height="360"> 
<img src="1.jpg"> 
<img src="2.jpg"> 
</div> 

及其工作！ PS：經過測試的響應式網站和所有瀏覽器。