0

我正在尝试运行一些代码，以在加载并填充来自 AJAX 调用的图像后获取 div 的宽度和高度。

在放置图像之前，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。

bubbleWrap 是加载区域内的一个 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。不过，当我离开并返回时，一切似乎都很棒。有什么想法吗？

4

1 回答 1

0

我有一个插件可以很好地做到这一点。

只需在注入新 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-22T00:57:16.507 回答