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

Question

在熟悉AJAX的同时，我遇到了以下我不理解的问题。

通常，当在线商店动态加载产品结果的新页面时，页面请求指定其想要的产品数据的资源（例如产品100-200），然后定位所接收的数据（品牌，价格等）。这一页。

用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