Javascript 显示微调器，直到加载整个部分

我想显示加载微调器，直到页面上包含图像的部分完全加载

我正在使用Django、Jquery和Ajax

Html非常基本，我有两个div，如下所示：

$('.panel-body').on('click', '[data-inspection-row]', function (e) {
    var inspection_id = e.currentTarget.dataset['inspectionId'];
    $.ajax({
        type: "GET",
        url: '/master/inspection_details/' + inspection_id + "/",
        beforeSend: function () {
            $("#details-loader").removeClass("hidden");
        },
        success: function (result) {
            $('#right_side_content').hide().html(result).fadeIn(1000);
            $("#details-loader").addClass("hidden");

        },
        error: function (data) {
            $('#inspection-errors').removeClass('hidden').html(data.responseText);
        }

    })
});

<div class="panel pad-no">
    <div class="panel-body ">
        <div id="left_side" class="col-xl-4 pad-no-lft" style="padding-right: 15px;">
            <!------------ Left side ---------------->
            <div class="panel mar-no bord-no">
                <div id="left_side_content" class="panel-body">

                    <!-------------- Show errors ------------------->
                    <div id="inspection-errors" class="hidden"></div>
                    <!---------------------------------------------->


                    <!------- Show list of all inspections ---------->
                    <div id="inspections-list">
                        <table id="inspections-table" class="table">
                            <thead>
                            {% include "master/inspection_head.html" %}
                            </thead>
                            <tbody id="result">
                            {% for inspection in data %}
                                {% include "master/inspection_body.html" %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    -------- End list of all inspections -------->
                </div>
            </div>
            <!------------- End Left side --------------->
        </div>

        <!----------------- Right side -------------------->
        <div id="right_side_container" class="col-xl-8 panel" style="padding: 15px;position: relative;">
            <div id="details-loader" class="hidden spinner"></div>
            <div id="right_side_content"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div id="details-loader" class="spinner"></div>

<div class="panel">
    <div class="panel-body pad-no">
        <div id="inspection-details">
            <div class="wrapper-outter">
                <div class="wrapper-inner" style="margin-left: 0;">
                    {% for picture in data.pictures %}
                        <a class="fancybox pad-no thumb" rel="ligthbox" href="{{ picture }}">
                            <img {% if forloop.last %} id="last-img" {% endif %} class="img-responsive"
                                                       src="{{ picture }}"/>
                        </a>
                    {% endfor %}
                </div>
                <div class="prevArrow"><i class="ti-angle-left icon-2x"></i></div>
                <div class="nextArrow"><i class="ti-angle-right icon-2x"></i></div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $("#details-loader").show();
    $('img').on('load', function () {
        var id = $(this).attr("id");
        if (id === "last-img") {
           $("#details-loader").hide();
        }
    });
 })

左边是一张桌子，右边是详细信息页。我正在尝试显示用户单击的详细信息。当用户单击其中一个表行时，我希望显示相应的详细信息页面。带有

ajax

调用的

onClick

事件如下所示：

$('.panel-body').on('click', '[data-inspection-row]', function (e) {
    var inspection_id = e.currentTarget.dataset['inspectionId'];
    $.ajax({
        type: "GET",
        url: '/master/inspection_details/' + inspection_id + "/",
        beforeSend: function () {
            $("#details-loader").removeClass("hidden");
        },
        success: function (result) {
            $('#right_side_content').hide().html(result).fadeIn(1000);
            $("#details-loader").addClass("hidden");

        },
        error: function (data) {
            $('#inspection-errors').removeClass('hidden').html(data.responseText);
        }

    })
});

<div class="panel pad-no">
    <div class="panel-body ">
        <div id="left_side" class="col-xl-4 pad-no-lft" style="padding-right: 15px;">
            <!------------ Left side ---------------->
            <div class="panel mar-no bord-no">
                <div id="left_side_content" class="panel-body">

                    <!-------------- Show errors ------------------->
                    <div id="inspection-errors" class="hidden"></div>
                    <!---------------------------------------------->


                    <!------- Show list of all inspections ---------->
                    <div id="inspections-list">
                        <table id="inspections-table" class="table">
                            <thead>
                            {% include "master/inspection_head.html" %}
                            </thead>
                            <tbody id="result">
                            {% for inspection in data %}
                                {% include "master/inspection_body.html" %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    -------- End list of all inspections -------->
                </div>
            </div>
            <!------------- End Left side --------------->
        </div>

        <!----------------- Right side -------------------->
        <div id="right_side_container" class="col-xl-8 panel" style="padding: 15px;position: relative;">
            <div id="details-loader" class="hidden spinner"></div>
            <div id="right_side_content"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div id="details-loader" class="spinner"></div>

<div class="panel">
    <div class="panel-body pad-no">
        <div id="inspection-details">
            <div class="wrapper-outter">
                <div class="wrapper-inner" style="margin-left: 0;">
                    {% for picture in data.pictures %}
                        <a class="fancybox pad-no thumb" rel="ligthbox" href="{{ picture }}">
                            <img {% if forloop.last %} id="last-img" {% endif %} class="img-responsive"
                                                       src="{{ picture }}"/>
                        </a>
                    {% endfor %}
                </div>
                <div class="prevArrow"><i class="ti-angle-left icon-2x"></i></div>
                <div class="nextArrow"><i class="ti-angle-right icon-2x"></i></div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $("#details-loader").show();
    $('img').on('load', function () {
        var id = $(this).attr("id");
        if (id === "last-img") {
           $("#details-loader").hide();
        }
    });
 })

我在

success

函数中得到的结果来自Django模板：

{% for picture in data.pictures %}
     <a class="fancybox pad-no thumb" rel="ligthbox" href="{{ picture }}">
            <img class="img-responsive" src="{{ picture }}"/>
     </a>
{% endfor %}

更新

我更改了详细信息部分（django模板），现在如下所示：

$('.panel-body').on('click', '[data-inspection-row]', function (e) {
    var inspection_id = e.currentTarget.dataset['inspectionId'];
    $.ajax({
        type: "GET",
        url: '/master/inspection_details/' + inspection_id + "/",
        beforeSend: function () {
            $("#details-loader").removeClass("hidden");
        },
        success: function (result) {
            $('#right_side_content').hide().html(result).fadeIn(1000);
            $("#details-loader").addClass("hidden");

        },
        error: function (data) {
            $('#inspection-errors').removeClass('hidden').html(data.responseText);
        }

    })
});

<div class="panel pad-no">
    <div class="panel-body ">
        <div id="left_side" class="col-xl-4 pad-no-lft" style="padding-right: 15px;">
            <!------------ Left side ---------------->
            <div class="panel mar-no bord-no">
                <div id="left_side_content" class="panel-body">

                    <!-------------- Show errors ------------------->
                    <div id="inspection-errors" class="hidden"></div>
                    <!---------------------------------------------->


                    <!------- Show list of all inspections ---------->
                    <div id="inspections-list">
                        <table id="inspections-table" class="table">
                            <thead>
                            {% include "master/inspection_head.html" %}
                            </thead>
                            <tbody id="result">
                            {% for inspection in data %}
                                {% include "master/inspection_body.html" %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    -------- End list of all inspections -------->
                </div>
            </div>
            <!------------- End Left side --------------->
        </div>

        <!----------------- Right side -------------------->
        <div id="right_side_container" class="col-xl-8 panel" style="padding: 15px;position: relative;">
            <div id="details-loader" class="hidden spinner"></div>
            <div id="right_side_content"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div id="details-loader" class="spinner"></div>

<div class="panel">
    <div class="panel-body pad-no">
        <div id="inspection-details">
            <div class="wrapper-outter">
                <div class="wrapper-inner" style="margin-left: 0;">
                    {% for picture in data.pictures %}
                        <a class="fancybox pad-no thumb" rel="ligthbox" href="{{ picture }}">
                            <img {% if forloop.last %} id="last-img" {% endif %} class="img-responsive"
                                                       src="{{ picture }}"/>
                        </a>
                    {% endfor %}
                </div>
                <div class="prevArrow"><i class="ti-angle-left icon-2x"></i></div>
                <div class="nextArrow"><i class="ti-angle-right icon-2x"></i></div>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $("#details-loader").show();
    $('img').on('load', function () {
        var id = $(this).attr("id");
        if (id === "last-img") {
           $("#details-loader").hide();
        }
    });
 })

因此，对于

forloop.last

我添加了一个id

last img

，如果它是

循环迭代的最后一个
，然后我检查加载的图像是否有该id，如果有，则隐藏微调器

但问题是一样的。我做错了什么？< /P> < P > 1）在jQuery中使用<代码>加载< /代码>事件，考虑“<代码> IMG< /Calp>元素将在<代码>就绪< /COD>事件触发之后创建。在
上使用
，如此处接受的答案：

或

2） 在后端插入
base64
字符串，而不是图像的URL
我在stackoverflow上找到了另一个问题的解决方案。这里是链接


该库是imagesLoaded，这里是指向github页面的链接


我希望它能帮助其他人解决同样的问题。
请在此处发布html检查。您需要使用JavaScript加载图像，向图像添加
onload
处理程序，然后在加载所有图像后隐藏微调器。你可以通过承诺来实现这一点。@ChrisG我添加了一个带有该问题链接的答案。@Boky不重要；您的问题仍然是重复的。@Boky请参阅第1选项的更新