Question

我正在尝试简单的东西 -- 制作一个jQuery 脚本, 等待显示整个页面, 包括所有 DIV、文本和图像。当页面正在装入时, 而不是显示页面的部分, 我想显示一个旋转的 GIF 图像, 而当整个页面被装入时, 我们可以在浏览器窗口中淡出页面的内容。

在装入 HTML 页面时, 有很多脚本可以随ajax 请求装入容器 DIV 中, 但这是不同的。这将显示旋转的 GIF, 而 HTML 页面正在装入中。感谢任何帮助

此类型的脚本只对ajax 请求有效

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

Answer 1

$( 文件) $(...) fire 即刻装入 DOM 。这是太快了。您应该使用 $( windowow).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... -->

看看这支小提琴:http://jsfiddle.net/gK9wH/9/

Answer 2

I would cover the entire page with an overlay, and then remove the overlay once the page loads. You can tweak this to also show a loading.gif if you d like. Here s an example:

HTML HTML

<body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
</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;}

jj 查询 :

$(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);
});

您需要调整此选项, 以便您在页面被请求( 调换 < code>$( 显示Overslay); < / code > 调用, 以便在文档准备前将其点火) 后立即装入覆盖页。

Here s a simple working fiddle with a button to remove the overlay. You should be able to go from there :) http://jsfiddle.net/3quN5/

Answer 3

我认为最好的方式是有一个封面插页, 覆盖整个页面,同时它会装载。它会不透明, 并包含您的 GIF 。

当页面加载后,以下内容将隐藏 div :

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

以下内容将使div的页码与页面大小相同:

.div{
  height:100%;
  width:100%;
  overflow:hidden;
}

Answer 4

首先,您指的是身体标记之间的一切吗? 旋转礼品的最佳方法就是添加一个将 gif 定义为不重复和居中的一个类。当页面准备显示时删除该类。

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

这是最好的方法, 因为如果您提交了一些东西, 然后尝试通过 DOM 添加来添加 gif, 有些浏览器不会这样做, 因为页面已经提交。

友情链接