17

我正在尝试一些简单的事情——制作一个 jQuery 脚本，它将等待显示整个页面，包括所有 DIV、文本和图像。当页面加载时，我想显示一个旋转的 GIF 图像，而不是显示页面的一部分，当整个页面加载时，我们可以在浏览器窗口中淡化页面的内容。

有很多脚本可以通过 ajax 请求加载到容器 DIV 中——但这是不同的。这将在加载 HTML 页面时显示旋转的 GIF。任何帮助表示赞赏

这种类型的脚本仅适用于 ajax 请求

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
4

4 回答 4

42

$(document).ready(...)加载 DOM 后立即触发。这还为时过早。你应该使用$(window).on('load', ...)：

JavaScript：

$(window).on('load', function(){
    $('#cover').fadeOut(1000);
})

CSS：

#cover {
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML：

<div id="cover"></div>
<!-- rest of the page... -->

看看这个jsFiddle：http: //jsfiddle.net/gK9wH/9/

于 2012-05-24T17:54:47.357 回答
3

我会用覆盖覆盖整个页面，然后在页面加载后删除覆盖。如果您愿意，您可以调整它以显示 loading.gif。这是一个例子：

HTML

​&lt;body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
​&lt;/body>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#container{padding:20px;}

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}

#overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:2305px !important; /*change to YOUR page height*/
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}

jQuery：

$(document).ready(function () { 

        // Set a variable that is set to the div containing the overlay (created on page load)
        var page_overlay = jQuery('<div id="overlay"> </div>');

        // Function to Add the overlay to the page
        function showOverlay(){
            page_overlay.appendTo(document.body);
        }
        // Function to Remove the overlay from the page
        function hideOverlay(){
            page_overlay.remove();
        }

        // Show the overlay.
        $(showOverlay);

       });
});

$(document).ready(function () { 
    $(hideOverlay);
});

您需要对此进行调整，以便在请求页面时立即加载叠加层（调整$(showOverlay);调用，使其在文档准备好之前触发。

这是一个简单的工作小提琴，带有一个按钮来删除覆盖。你应该可以从那里去:) http://jsfiddle.net/3quN5/ ​​​</p>

于 2012-05-24T19:00:19.720 回答
2

我认为最好的方法是有一个“封面” div，它会在加载时覆盖整个页面。它将是不透明的，并且会包含您的 GIF。

页面加载后，以下内容将隐藏 div：

$(document).ready(function() {
  // Hide the 'cover' div
});

以下将使 div 成为页面的大小：

.div{
  height:100%;
  width:100%;
  overflow:hidden;
}
于 2012-05-24T17:48:27.857 回答
0

首先，您是指body标签之间的所有内容吗？做旋转礼物的最好方法是添加一个类，将 gif 定义为不重复和居中。当页面准备好显示时删除类。

$('body').addClass('loading')
$('body').removeClass('loading')

这始终是最好的技术，因为如果您提交一些东西，然后尝试通过 DOM 添加添加 gif，一些浏览器将不会这样做，因为页面已经提交。

于 2012-05-24T17:53:39.897 回答