是否可以使用Ajax / jQuery的方法preLOAD页面内容? [英] Is it possible to preload page contents with ajax/jquery technique?

查看:189
本文介绍了是否可以使用Ajax / jQuery的方法preLOAD页面内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否有可能preLOAD所有页面内容(如显示加载条/ gif动画..或者加载文字..),直到内容是满载,然后显示给用户/访客?如果这是可能的,你能给我只是指示或资源,遵循以实现这一目标。因为我能够很容易地找到图像preloaders,但我在寻找一个preloading技术,将preLOAD显示之前的网页上的所有内容。

Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.

推荐答案

有没有必要使用Ajax或东西,只需设置页面的包装DIV的显示的到的没有的。然后改变它的文件的加载时遮挡。在code可能是这样的,使用原始的Javascript:

There's no need to use Ajax or something, simply set the page's wrapper div display to none. then change it to block when the document is loaded. the code might be like this, using raw Javascript:

...
<script type="text/javascript">
        function preloader(){
            document.getElementById("preloader").style.display = "none";
            document.getElementById("container").style.display = "block";
        }//preloader
        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中。

feel free to comment, if you need this in jQuery.

更新,在jQuery的:

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>
...

相关文档:活动/ 准备,活动/的负荷,CSS / CSS 和放大器;核心/ $

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

这篇关于是否可以使用Ajax / jQuery的方法preLOAD页面内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆