Question

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

我正在使用Django，Jquery和Ajax。

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

左侧是表格，右侧是详细页面。我试图显示用户点击的详细信息。当用户单击其中一个表行时，我想显示相应的详细信息页面。调用onClick的{{1}}事件如下：

ajax

我在$('.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); } }) });函数中得到的结果来自Django模板：

success

我添加了{% for picture in data.pictures %} <a class="fancybox pad-no thumb" rel="ligthbox" href="{{ picture }}"> <img class="img-responsive" src="{{ picture }}"/> </a> {% endfor %}函数，显示的时间为一毫秒，但我仍然遇到照片加载问题。

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

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

任何想法如何显示一个微调器，直到所有照片的整个右侧都被加载？

HTML如下：

beforeSend

更新

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

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

用于检查最后一个图像是否加载的jquery如下：

<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(); } }); })我添加了一个id forloop.last，如果它是最后一个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

我希望它可以帮助其他人解决同样的问题。

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

2 个答案: