Javascript image loading

I’ve have done a lot of searching around the web and have asked several developers around the office but can’t seem to come up with a good solution. Here’s the problem:

Say I have a image gallery that’s 800×300 pixels. My images that are going into that gallery are larger than that defined space. I can use jquery to size and center the images no problem… except the fact that I need to have the images loaded in order to size and position correctly. Fireing the function before the images are loaded breaks the whole thing.

Coming from a flash background in flash you would simple create an event listener for when the image load is complete then fire the function, but HTML and javascript are a bit tricker due to browser caching and IE.

Passing the width and height or knowing that before hand isn’t an option. It’s got to be dynamic and load on the fly.

doing it on

$(window).load(function(){    

Anyone have any good ideas to over come this? Much appreciated.

try this may help

//e.g. image class is imgtoload

var img = new Image();
var iSrc = $('.imgtoload').attr('src');

$(img).load(function(){

// do the animation after image loaded, get image size(will work on webkit too), etc

}).attr('src', iSrc);

good luck

If I understand you correctly, there are a few options you can take:

 $(document).ready(function() { /* all your dom-ready stuff here */ }); 

 $(window).load(function() { /* all your window-load stuff here */ }); 

.. then put everything related to image-loading on the second function, obviously. Style your images not based on once-they-have-loaded settings but based on any scenario. For example, position them absolutely within a relative parent, and give them a width of 100%. This will automatically size them for you without the need to pre-load them first.

Alternatively, you can just hook up a .load() function within your $(document).ready function, to make sure images have loaded on the fly. An example:

$(document).ready(function() {
    // cool stuff
    $('img').bind('load', function() {
        // do anything now that our images have loaded
    });
});

And if neither solution is the one you wanted, just search for “preloading images jquery”, which might help you further.

Chris

@crozer, the problem with “bind” is bind only works if the code is already on the page. In my scenario I’m adding the code and the images when I click a button. Maybe “live” but I beleive I tried that. I’ll do another test.

As far as positioning them with 100% what about the height? What if i need to center them vertically? And are you saying do the styling just in the CSS . no need for the javascript for positioning? Right now I’m getting the width and height of the containing element minus the width and height of the image and then multiplying by .5 to center position.

marcfolio said
@crozer, the problem with “bind” is bind only works if the code is already on the page. In my scenario I’m adding the code and the images when I click a button. Maybe “live” but I beleive I tried that. I’ll do another test. As far as positioning them with 100% what about the height? What if i need to center them vertically? And are you saying do the styling just in the CSS . no need for the javascript for positioning? Right now I’m getting the width and height of the containing element minus the width and height of the image and then multiplying by .5 to center position.

You could do a chain function with bind. I haven’t tried it, but it should work.

$(elem).bind('click', function() {
    $(anotherElem).bind('load', function() {
        // lala
    });
});

But that would get hairy. If you are dynamically adding content, I would go with AJAX . Otherwise, I don’t see why preloading your images with .load() should be an issue. Wherever the images are, you can reach them out and preload them.

By scaling the width of an image you are keeping its ratio. So that’s everything concerning scaling. Aligning is another thing, and you can easily do that by playing with margin+padding (eg. padding 50% within the parent object, margin -50% of the actual image’s size).

i’m too lazzy to read all that you wrote, but you may try http://api.jquery.com/live/

Wont lazyload work for your scenario? http://www.appelsiini.net/projects/lazyload