等待执行代码，直到AJAX调用图像呈现后

我想运行一些代码，它抓取div的宽度和高度后，它被加载并从AJAX调用图像填充。等待执行代码，直到AJAX调用图像呈现后

该div是0x0，直到图像被放置，所以检查之前，几乎打破了所有的尺寸。

我试过.load（）（不工作，因为这是一个AJAX调用）。我也试过了imagesLoaded js插件。以下是我现在所拥有的：

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

我提醒所有火前的图像是可见的，那么我的“空间”对象仍具有高度和0

气泡布的宽度装载内一个div包含有问题的图像的区域。我意识到我可能可能在这里解决大部分时间的问题 - 但这似乎并不理想。我错过了什么？

我现在实现这个特定状态的负载是这样的：

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

       }); 
     });

不幸的是，在页面重载，高度最终仅10似乎一切伟大的，当我刚导航离开和回来，但是。有什么想法吗？

来源

2012-10-22 cooperia

我有一个plugin可以做到这一点很好。

只需在注入新的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. 
    }); 
};

来源

2012-10-22 00:57:16 alex

我会给它一个旋转 - 谢谢！ – cooperia

我更新了我在上面做的事 - 看起来它几乎在工作。我错过了一些愚蠢的东西吗？ – cooperia

解决的问题 - 尽管可能不是最好的方式。除了我在startBubbles函数内部运行第二个waitForImages以覆盖图像未被缓存时，以上所有内容都是相同的。再次感谢Alex！ – cooperia

等待执行代码，直到AJAX调用图像呈现后

回答

相关问题