Question

上下文 - 我的页面动态加载了很多div容器，其中加载了1或2个图像但隐藏了。一旦加载了所有隐藏的图像（我使用waitForImages JQuery插件来确保这一点），我遍历每个容器并通过每个容器中的每个图像，并将ajax调用发送到php函数，该函数确定其中的主色像素那个形象。当此ajax调用返回颜色时（如果有两个图像），脚本将容器设置为该颜色/那些颜色。

如果我强制ajax调用同步工作，我已经完美地工作了但是当有很多图像需要通过时，这会冻结我的页面，你可以想象。我真的可以用它来加载容器，然后在页面上更新容器颜色时允许页面上的交互。

以下是其中一个容器的示例，在该过程完成后（因此应用了背景颜色）：

<div class="image_product" style="background-color: rgb(186, 214, 78);" onclick="view_product(27);">
    <img style="display:none;" src="/module_uploads/image_replacer/23/110914130755_0_94.jpg">
    <img style="display:none;" src="/module_uploads/image_replacer/13/180614104219_0_94.jpg">
    <div class="product_grid_heart_container" style="border-top-color: rgb(255, 255, 255) !important; background-color: rgb(239, 63, 63);">
        <div class="product_grid_heart"> AK/H </div>
    </div>
</div>

这是我的代码，通过同步实现：

$('div.image_product').each(function() {
    var colors = [];
    $(this).find('img').each(function() {
        var img = $(this).attr('src');
        var sanitised_img1 = img.replace(/\//, "");
        var sanitised_img = sanitised_img1.replace(/\//g, "***");
        $.ajax({
             async: false,
             type: "POST",
             url: '/general/dominant_colour/'+sanitised_img+'/rgb',
             success: function(dominant_colour) {
                colors.push(dominant_colour);
             }
        });
    });
    if($(this).find('.secondary_cat_image').length > 0)
    {
        $(this).find('.product_grid_heart_container').css({"background-color": "rgb(" + colors[0] + ")"});
    }
    else
    {
        $(this).css("background-color", "rgb(" + colors[0] + ")");
        if(colors.length > 1)
        {
            $(this).find('.product_grid_heart_container').css({"background-color": "rgb(" + colors[1] + ")"});
        }
        else
        {
            $(this).find('.product_grid_heart_container').css({"background-color": "rgb(" + colors[0] + ")", "border-top-color": "rgb(" + colors[0] + ")"});
        }
    }
});

就像我说的那样完美无缺，它只是冻结了我不能拥有的页面。我确定答案在于承诺，但是我发现的例子很有意义，我真的很难将它们应用到我的情况中，我最终感到困惑。任何帮助都非常赞赏！

JQuery用ajax调用和promises嵌套每个循环？

0 个答案: