Question

我的页面中有一系列div，其中我附加了从多个ajax调用返回的数据，这些调用是在单击按钮后启动的。我想在每个div中显示一个加载gif图像，直到我的数据被返回，然后删除gif并显示图像。奇怪的是，当我开始点击它没有显示任何内容的按钮时，但是在第一个请求获得响应并且内容被加载到特定div中之后，图像显示在其他div中。这些是我页面上的div

<div class="container-fluid">
    <div class="row">
        <div class="no-more-tables col-md-4" id="divCamere"></div>
        <div class="no-more-tables col-md-4" id="divOpzioniSoggiorno"></div>
        <div class="no-more-tables col-md-4" id="divOpzioniCamera"></div>
        <div class="no-more-tables col-md-4" id="divPromoCode"></div>
        <div class="no-more-tables col-md-4" id="divListino"></div>
        <div class="no-more-tables col-md-4" id="divOfferteSpeciali"></div>

    </div>
</div>

这是我脚本上的代码，我点击按钮后将图像附加到div中：

$(document).on('click', '#Button1', function (evt) {
evt.preventDefault();

$("#divCamere").empty();
$("#divOpzioniSoggiorno").empty();
$("#divOpzioniCamera").empty();
$("#divPromoCode").empty();
$("#divListino").empty();
$("#divOfferteSpeciali").empty();

$("#divCamere").append('<img src="imagesAjax/Loading_icon.gif" id="loadingCamere" class="loadingImage"/>');
$("#divOpzioniSoggiorno").append('<img src="imagesAjax/Loading_icon.gif" id="loadingOpzSoggiorno" class="loadingImage"/>');
$("#divOpzioniCamera").append('<img src="imagesAjax/Loading_icon.gif" id="loadingOpzCamera" class="loadingImage"/>');
$("#divPromoCode").append('<img src="imagesAjax/Loading_icon.gif" id="loadingPromoCode" class="loadingImage"/>');
$("#divListino").append('<img src="imagesAjax/Loading_icon.gif" id="loadingListino" class="loadingImage"/>');
$("#divOfferteSpeciali").append('<img src="imagesAjax/Loading_icon.gif" id="loadingOfferteSpeciali" class="loadingImage"/>');

$(".loadingImage").css('visibility', 'visible');
...

我无法理解，但点击后没有显示加载的GIF

显示加载多个ajax请求的图像

0 个答案: