Question

我有一个JavaScript函数，可在页面加载后刷新页面一次。为了让用户知道它正在加载，我添加了一个加载图标。它可以正常工作，但是在首次加载页面后立即停止，并且在页面重新加载时不显示。

我希望仅在重新加载页面后隐藏加载图标。

这是我的代码：

<script type="text/javascript">
$(document).ready(function () {

    (function () {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad')) {
                localStorage['firstLoad'] = true;
                window.location.reload();
            }
            else
                localStorage.removeItem('firstLoad');
            $("#loaderbox").hide();
        }
    })();
});
</script>

加载程序图标代码：

<div id="loaderbox">
<div class="loader_bg"></div>
<div class="loder_in">
    <div class="loader_wrapper">
        <div class="preloader-wrapper big active" style="width:102px;height:102px;">
            <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
        <div class="im_wrapper" style="left:6px;"><img src="/static/images/key.png" alt=""></div>
    </div>
</div>

Answer 1

问题在于

window.location.reload();

不会停止脚本的执行。

因此，您基本上拥有：

window.location.reload();
$("#loaderbox").hide();

因此，在重新加载完成之前，您的加载器框始终处于隐藏状态（特别是如果花费几秒钟的时间，这很可能会导致您不需要加载/注意它不在此处）。

您可以在控制台中使用以下命令进行测试：

window.location.reload(); alert("before reload");

显示重新加载之前的警报。

解决方法是在return之后直接添加reload()以停止进一步执行（或调整.hide()的位置，以便它并不总是在if-else之后运行

$(document).ready(function () {

    (function () {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad')) {
                localStorage['firstLoad'] = true;
                window.location.reload();
                return false;
            }
            else {
                localStorage.removeItem('firstLoad');
                $("#loaderbox").hide();
            }
        }
    })();
});

Answer 2

相反，使用javascript来检测页面何时完成加载并删除加载图标。

$(document).ready(function () {
    $("#yourImageId").remove();
});

Answer 3

完成DOM之后，函数$（document）.ready被触发。

在加载完整内容（img等）之后，使用此函数执行功能

$(window).on('load', function() {
 console.log('All assets are loaded')
})

隐藏在window.location.reload（）之后的加载图标

3 个答案: