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

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

Answer 1

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

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

    
Loading... Please Wait.
 
  
  

在jQuery中更新 ：

相关文档：事件/ 准备 ，事件/ 加载 ，CSS / css和核心/ $

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

最好的办法

 function ajax（）{
 $（'＃wapal'）。html（'path to image'）;
 $就（{
      url： 'somfile.php'，
         方法：“得到”，
         成功：function（数据）{
          if（data ==''）返回;
          $（ '＃WAPAL'）HTML（数据）。
        }
     }）;
 }

Answer 5

你可以轻松地使用jquery。

脚本

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

STYLES

 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。

脚本

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

STYLES

 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"