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

Question

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

I'm not familiar with `livequery`, but if it requires a selector, as I imagine it must, you probably need `$(.theImage > img').livequery(function(){` — lonesomeday, Oct 09 '11 at 15:49
@lonesomeday — Thanks that fixed it somewhat. It executes the code on the first loaded images, but anything after infinite scroll is ignored. You can see it not working here: http://syndex.me — RGBK, Oct 09 '11 at 16:02
Is there any obstacle to use CSS-only solution? You could wrap each image inside a block element, and then make it 'img { max-width: 100% }'. In case you need it to work across all browsers, consider reading http://unstoppablerobotninja.com/entry/fluid-images/ — Lapple, Oct 09 '11 at 16:15
@lapple Nope, it's not dynamic enough. I'll be having images at times sharing the same row. And also clocking max width once i figured out this one. — RGBK, Oct 09 '11 at 16:31

score 0 · Answer 1 · edited Oct 09 '11 at 15:52

0

Use delegate:

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

edited Oct 09 '11 at 15:52

Rob W

341,306
83
791
678

answered Oct 09 '11 at 15:48

Eric

95,302
53
242
374

`delegate` requires an event. You haven't specified one. – lonesomeday Oct 09 '11 at 15:51
@lonesomeday: Aw, man, you're right. I could have sworn you could just bind it to elements being created. – Eric Oct 09 '11 at 15:52
I *believe* (though I am open to correction...) that that is precisely what the `livequery` plugin does. – lonesomeday Oct 09 '11 at 15:53
i tried specifying the event 'load'... is that an event? @lonesomeday I'll try the selector thing you suggested. Holding thumbs. – RGBK Oct 09 '11 at 15:58

score 0 · Answer 2 · answered Oct 09 '11 at 17:04

0

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.

answered Oct 09 '11 at 17:04

Lapple

3,385
20
20

That makes sense, but i get an error now: Uncaught TypeError: Cannot call method 'each' of null. So it does not get "each"? or this whole script is loaded before the document is ready perhaps? Maybe I should attach this script to the end of the page rather then in the head? – RGBK Oct 09 '11 at 17:27
Well, yes, I have scanned the script once again — the dollar sign is already being in use. Try to load the plugin script after jQuery and use 'jQuery' instead of a dollar sign. Updated the http://jsfiddle.net/R8yLZ/4/ for you. – Lapple Oct 10 '11 at 02:38
http://stackoverflow.com/questions/7707672/javascript-manipulating-attributes-of-dynamically-loaded-or-autopaged-content/7707696#7707696 I wish it were as easy as you've shown in there. (I tested the above it still doesnt recognise what's going on). Hope you a help. JS is a bitch. Long live jQuery. – RGBK Oct 10 '11 at 02:55

score 0 · Answer 3 · answered Oct 09 '11 at 18:07

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);
      }
});

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

3 Answers3