等待執行代碼，直到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調用圖像呈現後

回答

相關問題