是否可以使用Ajax / jquery技术预加载页面内容？

小编典典

是否可以使用Ajax / jquery技术预加载页面内容？

ajax

是否可以预加载所有页面内容（例如显示加载栏/动态gif
..或加载文本..），直到内容完全加载然后显示给用户/访问者为止？如果可以的话，您能给我一些指导或资源以实现这一目标。因为我能够轻松找到图像预加载器，但是我正在寻找一种预加载技术，该技术可以在显示之前预加载页面上的所有内容。

阅读 223

2020-07-26

共1个答案

小编典典

无需为此使用Ajax。只需将页面的包装器div设置为display即可none。然后将其更改为加载文档block时。 __

使用普通javascript，您的代码可能如下所示：

<script type="text/javascript">
    function preloader() {
        document.getElementById("preloader").style.display = "none";
        document.getElementById("container").style.display = "block";
    }

    window.onload = preloader;
</script>

<style>
div#wrapper {
    display: none;
}

div#preloader {             
    top: 0; right: 10px;
    position:absolute;
    z-index:1000;
    width: 132px; height: 38px;
    background: url(path/to/preloaderBg.png) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit                 
}
</style>

<body>
    <div id="preloader">Loading... Please Wait.</div>
    <div id="wrapper">
        <!-- page contents goes here -->
    </div>
</body>

*在jQuery中 *更新：

<script type="text/javascript">
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
    $(document).ready(function(){ 
        $("#preloader").hide();
        $("#container").show();
    });
</script>

相关文档：Events / ready，Events /
load，CSS /
CSS和Core /
$

2020-07-26