Question

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

Answer 1

没有必要为此使用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>

相关文件：活动/ ready，活动/ load，CSS / css＆amp;芯/ $

Answer 2

如果您选择隐藏内容直到整个页面加载的方法，请不要将其隐藏在CSS中，然后在JavaScript中取消隐藏。如果您这样做，任何禁用或禁用JavaScript的人都将完全没有页面。相反，从脚本中执行隐藏和显示。

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

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

但事实恰恰相反：当部分内容可用时，等待在页面加载时向用户显示任何内容时降低性能。击败渐进式渲染会使浏览速度变慢，而不是更快。它通常明显是错误的东西，除了在一些利基案例与普通浏览器渐进式渲染是最好的。这就是网络的运作方式;人们已经习惯了。

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

Answer 3

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

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

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

Answer 4

最好的方式

function ajax(){
$('#wapal').html('path to image');
$.ajax({
      url:'somfile.php',
         method:'get',
         success:function(data){
         if(data =='') return;
         $('#wapal').html(data);
       }
    });
}

Answer 5

你可以轻松地使用jquery。

SCRIPT


$(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"

Answer 6

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

你可以轻松地使用jquery。

SCRIPT

$(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"

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

6 个答案: