显示加载图标，直到页面加载其第一个元素答案

【问题标题】：Show a loading icon until the page loads its first element显示加载图标，直到页面加载其第一个元素
【发布时间】：2017-01-25 13:29:11
【问题描述】：

我有一个移动网站，我希望在用户点击链接时添加一个加载图标。我找到了一个不错的教程 - Check it here

我用过这个，但我遇到了问题。它将显示加载图标，直到页面完全加载。但是对于较慢的连接，可能需要很长时间。我需要做的是，当页面加载它的第一个内容或至少要显示的内容时，它会停止显示加载图标，这样用户就不需要等待很长时间，并且他可以在页面部分加载时开始检查页面。我不知道我该怎么做。任何帮助，将不胜感激。这是我正在使用的代码 -

       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $(".loader").fadeOut("slow");
    })
    </script>
<div class="loader"></div>

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

【问题讨论】：

在问题中显示一些相关代码！
@Mikelis Baltruks：不是重复的，而是很好的信息
@MikelisBaltruks 我的问题不同。我需要当用户点击链接时，它会显示加载图标，但如果它已经分页了部分内容，那么它应该停止加载图标

标签： javascript jquery html

【解决方案1】：

document.addEventListener( "DOMContentLoaded", ready, false );
function ready(){
alert("page initialised");
}

使用 DOMContentLoaded 代替 onload...

【讨论】：