Currently, I am facing a challenge with my code that aims to determine the width and height of a div only after it has been loaded with an image from an AJAX request.
The dimensions of the div remain 0x0 until the image is successfully placed inside it, causing any checks prior to this moment to disrupt the process entirely.
I have experimented with various solutions such as using .load() (which proved ineffective due to the nature of the AJAX call) and even attempted to implement the imagesLoaded JavaScript plugin. Below is the snippet I am currently working with:
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);
});
Despite setting up alerts within the code, they all trigger before the image becomes visible in the div, resulting in the 'space' object retaining zero values for both height and width.
The 'bubbleWrap' element houses the image content within the loading area. While I could potentially resolve the issue by introducing a manual delay, I am seeking a more optimized solution. Can you offer any insights into what could be missing or overlooked?
Here's how I am currently handling the load operation for this specific scenario:
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);
}
});
});
Upon reloading the page, the height measurement unexpectedly drops to just 10 units. Interestingly, everything functions smoothly when navigating away and returning to the page. Do you have any suggestions on how to address this discrepancy?