Home/ Questions/Q 8912879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:19:37+00:00

I have a page where I will be loading a couple of different sizes

  • 0

I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.

The scenario is this..

I have a slider which contains the thumbs for all the larger images; these all load when the page does.

The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..

function changeMainImage(image) {

    // Set big image
    var big_image = image + '-big.png'

    // Update main image url
    jQuery('#main_image').attr('src', big_image);

}

Now because the large images don’t load when the page does, this causes a small delay for the large image to show, which is rather undesirable.

Now I’m thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.

This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.

My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.

Both versions have pros & cons – any advice what to do here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The method you currently have is what I prefer to do. Load what is visible.

    Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.

    The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.

    Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.

    For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.

    • 0