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

我有一个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>

$（文档）.ready（函数（）{
（功能（）{
if（window.localStorage）{
如果（！localStorage.getItem（'firstLoad'））{
localStorage['firstLoad']=true；
window.location.reload（）；
}
其他的
localStorage.removietem（'firstLoad'）；
$（“#loaderbox”）.hide（）；
}
})();
});

加载器图标代码：

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

---

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

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

函数$（document）.ready在完成DOM后启动

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

问题是

window.location.reload();

不会停止脚本的执行

所以你基本上有：

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

因此，在重新加载完成之前，您的加载框始终处于隐藏状态（特别是如果需要几秒钟，否则您可能不需要加载/注意它不在那里）

您可以在控制台中通过以下方式进行测试：

window.location.reload(); alert("before 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();
            }
        }
    })();
});

---

您应该查看eventlisteners。此外，如果您需要刷新页面（在页面已经加载一次之后），您可能应该尝试改变这种行为。动态加载总是（几乎）优于页面刷新。这会让用户对正在发生的事情感到困惑。如果您删除

$（“#loaderbox”）.hide（）

-图像是否保留？您的描述暗示在此之前它没有显示，这可能是由于页面最初的呈现方式造成的。@freedomn-m如果我删除$（“#loaderbox”）.hide（）；则图像保留。请将

.hide

放在else中，或者在

.reload（）之后添加
return；
（这也包括localstorage不可用的情况）除非缓存图像，否则图像很可能位于
位置。重新加载（）
尝试了此操作，但图像没有被删除。我已更新我的答案，使其更接近原始代码。
$(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();
            }
        }
    })();
});