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

Question

此代码使用 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 - 我知道有人问这个问题有不同的用途，但是 none 的建议解决方案对我有用。

谢谢。

Answer 1

看起来第二次成功了，因为请求的图片已经缓存了。

图像加载后尝试计算 correct_width：

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();
    }
}

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

Answer 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);

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

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

Can't set correct div width after populating it with AJAX

javascript

css

ajax

jquery