這個頁面如何動態加載正確的圖像？

在熟悉AJAX的同時，我遇到了以下問題，我不明白。這個頁面如何動態加載正確的圖像？

通常，當網上商店動態加載產品結果的新頁面時，頁面會請求一個資源來指定它想要的產品數據（例如產品100-200），然後將接收到的數據（品牌，價格，等等）在頁面上。

用螢火蟲把這個this site弄到一邊，我注意到當一個新頁面的產品被動態加載時，沒有這樣的資源被請求。看起來，所有產品的所有數據（圖片除外）都是靜態的，只有在頁面之間切換時纔會請求圖片網址。

鑑於大圖像的名稱不在靜態頁面上，我很難理解頁面如何知道要請求哪些圖像。我注意到，頁面底部的縮略圖圖像的名稱與大圖像的名稱相同，但擴展名除外（8P_F與13P_F）。

我猜測開發人員可能只是簡單地修改縮略圖圖像名稱來提出大圖像的請求，但是我對Javascript的瞭解足夠糟糕，我無法確定發生了什麼。這是怎麼回事？

來源

2012-01-18 jela

鑑於他們要求關閉的價格，他們可能會承擔魔術獨角獸來完成所有工作。 – Pointy 2012-01-18 17:10:56

@Pointy一個有效的點。可悲的是，我自己必須訴諸學習AJAX。 – jela 2012-01-18 17:17:19

看看itemlib.js。這不是魔術。 – nobody 2012-01-18 17:18:27

我不認爲該網頁使用AJAX來獲取這些圖像。如果您使用Fiddler，您可以看到單擊箭頭時直接請求圖像。沒有打包的圖像數據（例如網址）實際返回。小圖標包含基本圖像名稱數據。我懷疑他們只是從字符串中剝離了這個，後添加了一個不同的字符串並設置了源屬性。

我想象他們做一些簡單的事情。

var smallImgURL = document.getElementById('smallimageX'); 
var bigImgUrl = smallImgUrl.substring(0, smallImageUrl.indexOf('_')); 
var bigImgUrl += '13P_F'; 
//call a fancy placeholder animation 
document.getElementById('bigimageContainer').src = bigImgUrl; 
//when load completes show image

來源

2012-01-18 17:26:12 mrtsherman

這個頁面如何動態加載正確的圖像？

回答

相關問題