843 posts
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+7 more
marcfolio says

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(){    
works, but what about the times you load images on the fly?

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

443 posts Don't be a HATER!
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+5 more
webinpixels says

try this may help :p

//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 :)

2217 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+10 more
crozer says

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

If you have setup your scripts within two main functions, such as:
 $(document).ready(function() { /* all your dom-ready stuff here */ }); 
.. and:
 $(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

843 posts
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+7 more
marcfolio says

@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.

2217 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+10 more
crozer says
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).

238 posts
  • Has been part of the Envato Community for over 4 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
ewizz says

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

6 posts
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
thinkdj says

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

by
by
by
by
by
by