17

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

4

6 回答 6

18

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

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

于 2009-04-08T03:06:27.417 回答
12

如果您选择在加载整个页面之前隐藏内容的方法，请不要将其最初隐藏在 CSS 中，然后在 JavaScript 中取消隐藏。如果你这样做，任何禁用或不可用 JavaScript 的人都将无法获得任何页面。相反，从脚本中隐藏和显示。

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

另请注意，“预加载器”一词并不适合您在这里所做的事情。'pre' 意味着您通过获取和缓存页面来提高性能，以便在需要的时候准备好运行。

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

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

于 2009-04-08T09:28:08.810 回答
2

我做了一些我需要知道图像何时完全加载的事情，所以我使用$.get()函数进行了预加载，并传递了一个回调函数作为最后一个参数。这样，当实际下载图像时，我的回调会触发，我会知道浏览器已经在缓存中保存了图像。

您可以编写一个函数，为您告诉它预加载的每个图像增加一个全局变量，然后您的回调可以减少计数器。当计数器归零时，调用另一个函数。一旦预加载所有图像，此功能现在将触发。

这是为了图像。当 $(document).ready() 被触发时，可以保证加载其他所有内容。因此，如果您此时开始您的例程，则应该加载页面上的所有内容。

于 2009-04-08T02:24:41.077 回答
2

最好的办法

函数阿贾克斯（）{
$('#wapal').html('图像路径');
$.ajax({
      url:'somfile.php',
         方法：'get'，
         成功：功能（数据）{
         如果（数据==''）返回；
         $('#wapal').html(数据);
       }
    });
}
于 2011-01-13T12:43:05.660 回答
1

你可以很容易地用 jquery 做到这一点。

脚本


$(window).load(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

款式


div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML 

div id="preloader"

于 2010-11-15T08:14:56.080 回答
1

对 DMus -Jerad Answer 进行了一些修改，因为当页面上有 adsense 时它不起作用。

你可以很容易地用 jquery 做到这一点。

脚本

$(document).ready(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

款式

div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML

div id="preloader"
于 2012-06-23T13:23:07.693 回答