jQuery — a .live() > each() >.load.() finella

EDIT - URL to see the issue http://syndex.me

I am dynamically resizing images bigger than the browser to equal the size of the browser.

This was no easy feat as we had to wait for the images to load first in order to check first if the image was bigger than the window.

We got to this stage (which works):

var maxxxHeight = $(window).height();

$(".theImage").children('img').each(function() {
    $(开发者_运维问答this).load( function() { // only if images can be loaded dynamically
        handleImageLoad(this);
    });
    handleImageLoad(this);
});

function handleImageLoad(img)
{
    var $img = $(img),  // declare local and cache jQuery for the argument
        myHeight = $img.height();
    if ( myHeight > maxxxHeight ){
        $img.height(maxxxHeight);
        $img.next().text("Browser " + maxxxHeight + " image height " + myHeight);
    };
}

The thing is, the page is an infinite scroll (I'm using this) I know that you are not able to attach 'live' to 'each' as 'live' deals with events, and 'each' is not an event.

I've looked at things like the livequery plugin and using the ajaxComplete function.

With livequery i changed

$(".theImage").children('img').each(function() {

to

$(".theImage").children('img').livequery(function(){

But that didnt work.

ajaxComplete seemed to do nothing so i'm guessing the inifinte scroll i'm using is not ajax based. (surely it is though?)

Thanks

Use delegate:

$(".theImage").delegate('img', function() {
    $(this).load( function() { // only if images can be loaded dynamically
        handleImageLoad(this);
    });
    handleImageLoad(this);
});

The problem is that your infinite scroll plugin does not provide the callback functionality. Once your pictures are loaded there is no way to affect them.

I have tried to modify your plugin, so that it will serve your needs, please see http://jsfiddle.net/R8yLZ/

Scroll down the JS section till you see a bunch of comments.

This looks really complicated, and I probably don't get it at all, but I'll try anyway :-)

$("img", ".theImage").bind("load", function() {
    var winH = $(window).height();
    var imgH = $(this).height();
      if (winH < imgH) {
          $(this).height(winH);
          $(this).next().text("Browser " + winH + " image height " + imgH);
      }
});