On Tue, Feb 3, 2009 at 1:41 PM, daveJay <davidjo...@exit42design.com> wrote:
>
> I've got a page set up where it loads each image on the page, one
> after the other. As you can see here:
>
> http://sandbox.exit42design.com/photography/folio_1.html
>
> The problem with this is that if one of the images is broken, it'll
> stop in it's tracks and not try to load the next.
>
> Here's an example of how I'm loading the images
>
> $(image[1]).load(function(){
>        $("#image1").attr({src : image[1].src});
>        image[2].src= "path/to/next/image.jpg";
> });
>
> $(image[2]).load(function(){
>        $("#image2").attr({src : image[2].src});
>        image[3].src= "path/to/next/image3.jpg";
> });
>
> So, basically when the first one is loaded, it inserts it onto the
> page, and then sets up the next image path, and so on and so on. So I
> need a way to detect if image 2 is going to load successfully, because
> if it can't image 3 will never be allowed to load.
>

I'd try to avoid writing a routine explicitly for each image and
instead use a loop. This is thoroughly untested.

$(function()
{
        var width = 1680;
        var height = 946;
        
        var imagesSrc =
        [
                "images/16-9/mark.jpg",
                "images/16-9/Matoso_070526_2977_leila.jpg",
                // etc.
        ];
        
        /* create the Image objects
         */
        var imagesObjects = new Array();

        for (var i = 0; i < imageSrc.length; i++)
        {
                imagesObjects[i] = new Image(width, height);
                imagesObjects[i].src = imagesSrc[i];
                
                /* this, or the block immediately below
                 */
                $(imagesObjects[i]).load(function()
                {
                        $("#img_" + i).attr({src : $(this).attr('src')});
                }
        }
        
        /* maybe this way is better
         */
        $(imagesObjects).each(function(i)
        {
                $(this).load(function()
                {
                        $("#img_" + i).attr({src : imagesObjects[i].src});
                }
        });
        
        /* Put the first image into the Main Image Wrapper
         */
        $("#image img").attr({src : imagesObjects[0].src});
});


>
> Thanks for any help. And any other comments/bug reports on the site
> are welcome as well =)
>

Nice pics. In FF3.0.5 (linux) when I click a thumbnail, the main image
fades out (could be a tad faster), fades back in, then abruptly
switches to the new image. I had a look at the gallery script but
couldn't figure out where the problem lies. My gut tells me that could
be optimised, too. But, one can't really say for sure without
understanding everything that's being done and I really should stop
procrastinating ;-)

Reply via email to