使用 AJAX 填充后无法设置正确的 div 宽度答案

【问题标题】：Can't set correct div width after populating it with AJAX使用 AJAX 填充后无法设置正确的 div 宽度
【发布时间】：2015-03-15 00:15:24
【问题描述】：

此代码使用 Ajax 调用填充图像滑块内的内部 div：

$.ajax({
    type: "GET",
    dataType: 'json',
    url: $(this).attr('href')
}).done(function (result) {
    
    // append thumbnails to lower slider
    var correct_width = 0;
    
    for (var $i = 0; $i < result[1].length; $i++) {
        $('#lower_slider').append("<img src='" + result[1][$i]['image_thumb_src'] + "'>");
        
        // calculate $('#lower_slider') width
        $('#lower_slider').find('img').each(function () {
            correct_width += $(this).outerWidth();
        });
    }
    
    // set $('#lower_slider') width
    $('#lower_slider').width(correct_width);
});

此代码的功能在第二次执行时完美运行 - 很明显，它与一些竞争条件有关。那么如何消除它们呢？

p.s - 我知道这个问题被问到了不同的用途，但没有一个建议的解决方案对我有用。

谢谢。

【问题讨论】：

不应该是这个代码：$('#lower_slider').find('img').each(function () { correct_width += $(this).outerWidth(); }) ;在 "for (i..." 循环之外？
逻辑说是的，但是当我尝试它时，$('#lower_slider').width() 只是出现的第一张图片
另外，你在 for lool 中缺少“var”： for (var $i = 0; $i
谢谢伊万，我修好了。不过还是遇到了同样的问题。
将“每个”段放在循环之后（如逻辑所示）并放入以下行：“console.log(correct_width);”在设置 #lower_slider 的宽度之前 - 看看最终值是多少

标签： javascript jquery css ajax

【解决方案1】：

看起来像是第二次工作了，因为请求的图像已经被缓存了。

加载图像后尝试计算正确宽度：

var correct_width = 0;
var imgArray = new Array();
var obj = this;

for (var $i = 0; $i < result[1].length; $i++) {
    imgArray[$i] = new Image();
    imgArray[$i].src = result[1][$i]['image_thumb_src'];
    imgArray[$i].onload = function() {
       $('#lower_slider').append("<img src='" + this.src + "'>");
       correct_width += $(obj).outerWidth();
    }
}

我没有测试过这段代码。不过应该没问题。

【讨论】：

我在这段代码中添加了一行：“$('#lower_slider').append ...”
感谢您的意见，@estornes！不过有些奇怪，在应用您的代码后我收到错误Cannot read property 'image_thumb_src' of undefined
就是这一行：$('#lower_slider').append("<img src='" + result[1][$i]['image_thumb_src'] + "'>");
添加了一行：“imgArray[$i].index = $i;”并修改了越野车线
现在错误是 - Cannot read property 'defaultView' of undefined 引用了这一行：correct_width += $(obj).outerWidth();

【解决方案2】：

好吧，我让它工作的唯一方法是在调整大小和宽度计算之前设置一个延迟：

var correct_width = 0;

for (var $i = 0; $i < result[1].length; $i++) {
    $("#lower_slider").append(
        "<img src=" + result[1][$i]["image_thumb_srcand "] + "'>"
    );
}

var wait = setTimeout(function () {
    $("#lower_slider")
        .find("img")
        .each(function () {
            correct_width += $(this).outerWidth() + 10;
            $("#lower_slider").innerWidth(correct_width);
        });
}, 1000);

可能有更好的解决方案，但没有其他对我有用。

【讨论】：