SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: image preloader

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image preloader

    I have a simple script I need.
    User clicks on product picture thumbnail, which opens up a new window with a larger version of this picture. The new window also contains a dynamic number of new thumbnails (up to 4) which when hovered over, display another larger picture in the same new window.
    However, the window needs to be resized so that it's large enough to fit the image with the largest width and the image with the largest height. I guess I could just make the new windows HUGE by default, but i don't want to.

    Anyway, i'm "preloading" the images using

    image[i] = new image();
    image[i].src = 'source';

    then i check to see if image[i]'s width and height are the maxium.

    But the problem i'm having I think is that the images width's and heights aren't available sometimes before they are used.
    So how do you properly preload the images (i.e. halt execution of the javascript until the large images are 100% loaded?)

    many thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You use the onload event. Then you can do those things only when the image has finished downloading:
    Code:
    image[i] = new Image();
    image[i].onload = function() {
      var width = image[i].width;
      var height = image[i].height;
    }
    image[i].src = 'source';
    new Image() should have a capital I.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •