このページはどのようにして正しい画像を動的に読み込みますか？

Question

AJAXに慣れている間、私は理解できない次の問題に出くわしました。

通常、オンラインショップで商品の結果の新しいページが動的にロードされると、そのページは、商品データ（商品100-200など）を指定するリソースを要求し、受信したデータ（ブランド、等）をページ上に表示する。

このthis siteをfirebugでポーチすると、新しいページの製品が動的に読み込まれると、そのようなリソースは要求されないことに気付きました。すべての製品のすべてのデータ（画像を除く）は静的で、ページを切り替えるときに画像のURLのみが要求されるように見えます。

大きな画像の名前が静的なページにないので、どの画像を要求するかをページがどのように知っているのか困惑しています。私は、ページの下部にあるサムネイル画像の名前が、拡張子（8P_F対13P_F）を除いて大きな画像の名前と同じであることに気付きました。

私は、開発者がサムネイル画像の名前を変更して大きな画像を要求するかもしれないと推測していますが、Javascriptについての知識は十分ではないので、それはここで何が起こっているのですか？

Answer 1

私はこれらの画像を得るためにページがAJAXを使用しているとは思わない。 Fiddlerを使用すると、矢印がクリックされたときに画像の要求が直接行われることがわかります。パッケージ化されたイメージデータ（例えば、URL）は実際には返されません。小さなアイコンには基本イメージ名のデータが含まれています。私は彼らが文字列からこれを取り除いているだけで、別の文字列を差し置いて、ソース属性を設定していると思われます。

私は彼らが何か簡単なことをすると思います。

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