圖片預加載：多少太多？

所以我有我自己的網頁here，這是一個可排序的縮略圖頁面。當加載第一個相關圖像時，load()事件激活每個縮略圖。由於我從頁面上的隱藏div抓取<img>標籤和文本內容，因此拇指激活可防止用戶點擊尚未卸載的圖像，然後等待預載在後臺進行。圖片預加載：多少太多？

呼叫是很簡單：

$('#content img:first-child').load(activateThumb).each(function(){ 
    if(this.complete || this.complete === undefined)this.load();});

的.each()卡子任何緩存的圖像和手動觸發事件load()。工作很好，是一個快速和精益的網站。現在，隨着網站的不斷髮展，單個HTML文件中有超過100個<img>標籤，我想知道是否有我接近的傳統限制。我應該將頁面分成35個不同的html文件嗎？我是否應該丟失標籤和光滑的預加載效果，以支持圖像點播的服務器端請求？

作爲一名優秀的程序員，你的直覺是什麼？

來源

2010-08-31 Isaac Lubow

那麼沒有明確的限制。您可以繼續按照您在網站上完成的方式進行儘可能多的圖片。

但它只是讓用戶在等待所有圖像「激活」時可能會感到沮喪。

因此，你可以做的是有分頁&顯示每頁20個圖像。這樣你可以使圖像加載速度更快。

在加載page1之後，如果用戶仍然在page1中，則可以開始預取page2。因此，當用戶點擊page2時，他看到一個非常敏感的網站:)

這裏沒有任何規則。事實上，如果您現在看到Google圖片有一天，他們就會像您所做的那樣做一些事情。

來源

2010-08-31 04:38:19

那麼我的推理是這樣的：用戶不需要等待每個圖像被激活。積極的讓他們知道哪些可以立即查看。當他們看着這些圖片時，圖像加載進行中......這是一個很棒的技術，但我只是擔心如果頁面變得太大會發生什麼。 – 2010-08-31 05:24:42

什麼都不會發生。它現在的樣子很棒。前進。如果它後來變得太過於瓶頸。然後想想分頁。但現在你的方法是完美的。 – 2010-09-01 10:04:05

-1

你可以像許多Web 2.0網站做到這一點：

在開始的時候，加載圖像顯示在頁面的當前可見的部分。
然後在用戶向下滾動頁面時加載其他圖像。

來源

2010-08-31 04:15:53 shamittomar

你看過我描述的頁面嗎？它不需要滾動，並且在開始時不顯示任何預加載的圖像。 – 2010-08-31 04:22:08

我點擊你的鏈接，然後帶到一個帶滾動條的頁面，我也立即被帶到一個帶有圖像的頁面。我不知道你爲什麼低估了他。 – Robert 2010-08-31 04:29:18

@Robert，這就是我的想法:) – shamittomar 2010-08-31 04:37:37

圖片預加載：多少太多？

回答

相關問題