Home/ Questions/Q 7064283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:48:55+00:00

While familiarizing myself with AJAX, I came across the following issue I do not

  • 0

While familiarizing myself with AJAX, I came across the following issue I do not understand.

Usually, when an online shop loads a new page of product results dynamically, the page requests a resource that specifies which product data it wants (eg products 100-200), and then positions the received data (brand, price, etc.) on the page.

Poking around this this site with firebug, I noticed that when a new page of products gets loaded dynamically, no such resource gets requested. It appears that all data (except images) for all products is static, and only the image URLs get requested when switching between pages.

I am puzzled how the page knows which images to request, given that the names of the big images are not on the static page. I noticed that the names of the thumbnail images at the bottom of the page are identical to the names of the big images with the exception of an extension (8P_F versus 13P_F).

I am guessing the developer might be simply modifying the thumbnail image names to make the requests for the big images, but my knowledge of Javascript is sufficiently poor that I cannot identify where this happens. Is that what is going on here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think the page is using AJAX to get these images at all. If you use Fiddler you can see that when the arrow is clicked a request is made for the images directly. No packaged image data (urls for example) are actually returned. The small icons contain the base image name data. I suspect that they are just stripping this from the string, postpending a different string and setting the source attributes.

    I imagine they do something simple like. 

    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
    • 0