这个页面是如何动态加载正确的图像的？

Question

在熟悉AJAX的过程中，我遇到了以下我不理解的问题。

通常，当在线商店动态加载新的产品结果页面时，该页面请求指定其需要的产品数据(例如产品100-200)的资源，然后定位接收到的数据(品牌、价格等)。在页面上。

使用firebug查看此this site时，我注意到，当动态加载新的产品页面时，不会请求此类资源。似乎所有产品的所有数据(图像除外)都是静态的，并且在页面之间切换时只请求图像URL。

我不明白页面如何知道要请求哪些图像，因为大图像的名称不在静态页面上。我注意到页面底部的缩略图的名称与大图像的名称相同，除了一个扩展名(8P_F与13P_F)。

我猜开发人员可能只是简单地修改了缩略图的名称来请求大图像，但我的Javascript知识足够差，以至于我不能确定这种情况发生在哪里。这就是这里发生的事情吗？

Answer 1

我认为页面根本没有使用AJAX来获取这些图像。如果您使用Fiddler，您可以看到，当单击箭头时，会直接请求图像。实际上不会返回打包的图像数据(例如urls)。小图标包含基本图像名称数据。我怀疑他们只是将其从字符串中剥离出来，添加一个不同的字符串并设置源属性。

我想他们会做一些简单的事情，比如。

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