843 posts
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Won a Competition
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+2 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.

436 posts Don't be a HATER!
  • Exclusive Author
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Has been a member for 4-5 years
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 :)

2211 posts
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Exclusive Author
  • Germany
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
+4 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
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Won a Competition
  • Sold between 100 000 and 250 000 dollars
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+2 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.

2211 posts
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Exclusive Author
  • Germany
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
+4 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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
ewizz says

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

6 posts
  • Sold between 1 000 and 5 000 dollars
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
thinkdj says

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

by
by
by
by
by
by