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

php javascript jquery ajax preloader

2022-08-30 23:03:27

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

答案 1

没有必要为此使用Ajax。只需将页面的包装器 div 设置为。然后将其更改为加载文档时。displaynoneblock

你的代码可能看起来像这样，使用vanilla 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/$

答案 2

如果您选择一种方法，其中内容在加载之前隐藏，请不要将其最初隐藏在CSS中，然后在JavaScript中取消隐藏。如果你这样做，任何禁用或不可用JavaScript的人都将根本没有页面。相反，请同时执行隐藏和显示脚本。

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

另请注意，术语“预加载器”并不适合您在此处执行的操作。“pre”表示您正在通过获取和缓存页面来提高性能，以便在需要时准备好使用。

但实际上情况恰恰相反：当部分内容可用时，它会在页面加载时等待向用户显示任何内容，从而降低性能。击败渐进式渲染会使浏览速度变慢，而不是更快。它通常明显是错误的事情，除了少数利基案例外，使用正常的浏览器渐进式渲染是最好的。这就是网络的工作原理;人们现在已经习惯了。

（也就是说，除了那些愚蠢的管理类型，他们并不真正使用或理解网络，但要求他们公司的网站同时出现。