Question

的jQuery

 $.ajax({
    type: 'GET',
    url: 'externalData.html',
    success: function( result ) {

        $("#divToFill").html(result);

        targetDiv = "#target1" ;
        $('body').attr('target_height', $(targetDiv).height());  // PROBLEM !

    },
    async: false
});

externalData.html

<div id="target1">
    <a href="">
        <span class="imageBox">
            <img  class="displayimage" src="img/dummy.jpg">
        </span>
        <strong class="productname">product</strong><em class="productinfo">info</em> 
        <span class="priceBox">
            <span class="price">9,95 €</span>
        </span> 
    </a>
</div>

问题是，在加载图像之前，targetDiv的高度是calculatet。有时我得到50px而不是180px的高度。

＆＃39; html的（）＆＃39;应该是同步的，并且＆＃39; async：false＆＃39;还应强制在加载数据后触发成功事件。我还能做什么？

Answer 1

加载图像与ajax-call无关，你只需要时间来加载图像，就像加载页面时一样（当你使用window.onload确保一切都被加载时）。

您可以使用document.getElementById(imageID).complete，我的结果非常可靠：

$.ajax({
    type: 'GET',
    url: 'externalData.html',
    success: function( result ) {
        $("#divToFill").html(result);

        targetDiv = "#target1";
        imageID = "imageID"; //so you need to give your image an ID
        getHeight(targetDiv,imageID);
    },
    async: false
});

function getHeight(targetDiv, imageID) {
    if (document.getElementById(imageID).complete) { //this checks whether the image has finished loading
        $('body').attr('target_height', $(targetDiv).height());
    } else {
        setTimeout(function(){getHeight(targetDiv,imageID);},5);
    }
}

Answer 2

唯一合适的解决方案是等到图像完成加载（除非您事先知道图像尺寸，在这种情况下，只需在CSS中手动指定）然后做任何你想做的事。

这可能有点棘手，因为有许多浏览器警告使得很难检测到何时加载图像。幸运的是，你可以使用this - 确保在.html之后立即创建事件监听器，并将其余的回调放在imagesloaded回调函数中。

Answer 3

你需要等到图像加载...因为你可以放置图像加载的条件，然后获得目标div的高度。

jQuery - 在同步ajax调用之后，DIV的高度不能足够快地计算

3 个答案: