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

发布于 2024-07-17 04:02:16 字数 145 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

和影子一齐双人舞 2024-07-24 04:02:17

对 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"

Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.

You can do it with jquery easily.

SCRIPT

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

回复收藏 0 原文

锦爱 2024-07-24 04:02:16

无需为此使用 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/准备就绪，事件/加载，CSS/ css & 核心/$

There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.

Your code might look like this, using 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>

Update, in 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>

Related documents: Events/ready, Events/load, CSS/css & Core/$

回复收藏 0 原文

苏大泽ㄣ 2024-07-24 04:02:16

如果您选择在加载整个页面之前隐藏内容的方法，则不要先将其隐藏在 CSS 中，然后再在 JavaScript 中取消隐藏。如果您这样做，任何禁用或不可用 JavaScript 的人都不会获得任何页面。相反，根据脚本进行隐藏和显示。

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

另请注意，术语“预加载器”并不适合您在这里所做的事情。 “pre”意味着您通过获取和缓存页面来提高性能，以便在需要时可以使用。

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

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

If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.

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

Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.

But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.

(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)

回复收藏 0 原文

乙白 2024-07-24 04:02:16

最好的办法

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

Best way

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

回复收藏 0 原文

万劫不复 2024-07-24 04:02:16

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

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

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

回复收藏 0 原文

早乙女 2024-07-24 04:02:16

你可以用 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"

You can do it with jquery easily.

SCRIPT


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