Question

我正在尝试运行一些代码，这些代码在加载并填充来自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，包含有问题的图像。我意识到我可能只是手动延迟在这里解决问题的MOST当时 - 但这似乎不是最佳的。我错过了什么？

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

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.当我离开并回来时，一切看起来都很棒。有什么想法吗？

Answer 1

我有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.
    });
};

等待执行代码，直到AJAX调用图像渲染

1 个答案: