載入帶有javascript事件的瀏覽器圖像？

Question

我有一個包含很多圖像的頁面，這些圖像最初是在使用選項卡式div時從視圖中隱藏的（即，使用CSS display：none隱藏某些div）。

因此，在隨后頁面加載時，加載所有圖像會花費一些時間，這看起來頁面很慢（因為瀏覽器上的加載欄在10秒鍾以上沒有完成）。

我想要一種不加載圖像的方法，直到它們在頁面上可見為止。

我玩過jQuery LazyLoad ，但是這似乎只在滾動瀏覽器時加載圖像（不適用於選項卡式div）。

因此，是否有一種方法可以使LazyLoad像這樣工作，還是有更好的方法呢？

謝謝！

Answer 1

也許jQuery Tabs可以滿足您的需要，只需在Tabs上調用Ajax ...

您如何顯示隱藏的div？

Answer 2

一種攻擊計划：

不要將圖像URL放在img標簽的src屬性中，而是將其放置在其他位置（例如，上面帶有特定類的隱藏范圍），並在顯示div時，遍歷所有img標簽並將src設置為URL它應該有。

作為一種方法，它肯定有一些缺點。

Answer 3

我最近已經嘗試過了，不得不說這已經不再適用於js了。 也許從未如此...像lazyload這樣的項目一直宣稱，它們將在啟動時停止加載所有圖像，但是您可以在firebug中看到這是行不通的。 甚至在domready以及開始滾動時，圖像都被加載了兩次。

您唯一的選擇是手頭上的ajax或執行以下操作：

<img src="transparent.gif" alt="" rel="real image source" />

然后在div可見時切換屬性，以便圖像開始加載。

至少在您不需要google將它們編入索引的情況下，此方法也很好。

希望有幫助！ :)

編輯：嗯，為什么我只是給出答案就得到-1？ 只需看看帶有lazyload的頁面並啟用firebug，然后滾動頁面即可。 甚至在stackoverflow上和lazyload插件的注釋中都說過，這是目前唯一的解決方案... :(

Answer 4

如果您正在使用（或可以使用）HTML5文檔類型，則可以將“ data-”前綴用於標記屬性：

<img src="" data-src="/path/to/image" style="display: none" />

然后，您可以使用Javascript將data-src填充到src中：

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Answer 5

如果您的唯一目標是“隱藏”由於圖像數量太多而花費的時間很長的進度條，那么我會選擇某種AJAX解決方案，因為這樣就不會“使用”進度條。 它確實在您想要加載HTML元素的方式（可能是何時）中引入了更多的復雜性。

我個人不喜歡將HTML屬性用於其原始用途之外的其他用途，因此將路徑存儲在另一個屬性中並在需要時進行切換將不是我的首選。 相反，我將嘗試創建一個JavaScript數組（id => path）並在需要時更新單獨的HTML IMG元素。

祝好運！ ;）

Answer 6

我以前沒有意識到這一點，但是LazyLoad確實支持事件觸發：

http://www.appelsiini.net/projects/lazyload

如果有人需要我的幫助，請告訴我！