在加载整个部分之前显示微调器[重复]

Question

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

我正在使用 Django、Jquery 和 Ajax。

Html 很基础，我有两个 div 如下：

左侧是表格，右侧是详细信息页面。我正在尝试显示用户点击的详细信息。当用户单击其中一个表行时，我想显示相应的详细信息页面。带有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);
        }

    })
});

我在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 %}

我添加了beforeSend 函数，该函数会显示一毫秒，但我仍然在加载照片时遇到问题。

当我点击左侧的表格行之一时，屏幕如下

大约 2-3 秒，然后详细信息部分加载，我得到的屏幕就像第一张图片一样。

知道如何在加载所有照片的整个右侧之前显示微调器吗？

---

HTML如下：

<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>

更新

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

<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>

而jquery检查是否加载了最后一张图片如下：

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

因此对于forloop.last，如果它是最后一个for 循环迭代，我添加一个id last-img，然后我检查加载的图像是否具有该ID，如果有，则隐藏微调器。

但问题是一样的。我做错了什么？

Answer 1

1) 在 jquery 中对图像使用load 事件，考虑到img 元素将在ready 事件触发后创建。在此处接受的答案中使用on：Event binding on dynamically created elements?

或

2) 在后端插入 base64 字符串而不是图片的网址

Answer 2

我在 stackoverflow 上找到了另一个问题的解决方案。这是链接

jQuery event for images loaded

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

https://github.com/desandro/imagesloaded

我希望它能帮助其他有同样问题的人。