Question

I am trying to run some code that grabs the width and height of a div after it is loaded and filled with an image from an AJAX call.

The div is 0x0 until the image is placed so checking the dimensions before pretty much breaks everything.

I have tried .load() (Doesn’t work because this is an AJAX call). I also tried the imagesLoaded js plugin. Here is what I have right now:

alert('outside;')
function startBubbles(){
    alert('inside');
    var space = new DisplaySpace($('#bubbleWrap').height(), $('#bubbleWrap').width());
    var count = 1;
    alert(space.getHeight());
    var delay = (function(){
      var timer = 0;
      return function(afterResize, ms){
        clearTimeout (timer);
        timer = setTimeout(afterResize, ms);
      };
    })();

    var spawnInterval = self.setInterval(function(){
        var aBubble = new Bubble(count, space);
        count++
        aBubble.spawnimate(aBubble);
        setTimeout(function() {aBubble.popBubble(aBubble)},Math.floor((Math.random()*30000)+10000));
    }, 500);
});

My alerts all fire before the image is visible, then my ‘space’ object still has height and width of 0.

bubbleWrap is a div inside the loading zone that contains the image in question. I realize I could probably but a manual delay in here to solve the problem MOST of the time – however that doesn’t seem optimal. What am I missing?

I’m now implementing the load of this particular state like this:

History.Adapter.bind(window,'popstate',function(){ 
                var state = History.getState(); 
                state = 'target='+state.data.state;
                $.get('contents.php', state, function(data){
                    if(state == 'target=bubbles'){
                        $('#loading_zone').html(data).waitForImages(startBubbles());
                    }
                    else{
                        $('#loading_zone').html(data);
                    }

                });
        });

Unfortunately, on page reload, the height ends up as only 10. Everything seems great when I just navigate away and come back, though. Any thoughts?

Answer 1

I have a plugin that could do this nicely.

Simply call it after you inject the new HTML.

// Assume this function is the callback to the *success*.
function(html) {
    $("#target").html(html).waitForImages(function() {
        // All descendent images have now loaded, and the 
        // containing div will have the correct dimensions.
    });
};