Question

是否可以预加载所有的页面内容(如显示加载酒吧/ gif动画. .或加载文本. .)直到完全加载内容然后显示给用户/访客?如果这是可能的,你能给我只是遵循实现这一方向或资源。因为我能找到图像预紧器很容易,但是我寻找一种预压技术,将预加载显示之前页面上的所有内容。

Answer 1

这个年代不需要使用Ajax。简单地设置页面年代包装器div <代码>显示> < /代码<代码> < /代码>。然后将其更改为<代码> > < /代码块时,< em > < / em >加载文档。

你的代码看起来像这样,使用香草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>

事件相关的文件:/ < a href = " http://docs.jquery.com/Events/ready fn”rel = " nofollow noreferrer " > < / >,事件/ < a href = " http://docs.jquery.com/Events/load fn rel = " nofollow noreferrer " > < / >加载,CSS / < a href = " http://docs.jquery.com/CSS/css # namevalue”rel = " nofollow noreferrer " > CSS < / > &核心/ < a href = " http://docs.jquery.com/%24 " rel = " nofollow noreferrer " > < / >美元

Answer 2

如果你选择一个方法的内容隐藏,直到加载整个页面,不要让它最初隐藏在CSS然后在JavaScript进行修改。如果你这样做,任何人都禁用了JavaScript或不可用任何页面。相反,隐藏和显示从脚本。

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

还要注意,术语“预紧器”是t真的对你做什么。“前”意味着你提高性能通过页面获取和缓存,这样它准备好了的时候它年代。

但实际上这是相反的:< em > < / em >性能减少等待显示用户没有在页面加载时,当部分内容可用。击败进步呈现使浏览速度较慢,而不是更快。通常是明显错误的东西,除了一些利基市场情况与正常的浏览器进步呈现是最好的。这是网络是如何工作的;人们使用它了。

(人,也就是说,除了那种愚蠢的管理类型不真正使用或理解网络但要求他们公司网站出现。)

Answer 3

最好的方法

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

Answer 4

我做了一件我需要知道一个图像满载时,所以我做了预压与<代码> $ . get() < /代码>函数,作为最后一个参数传递一个回调函数。这样,当图像实际上是下载,我回调将火,我知道浏览器已经在缓存中。

您可以编写一个函数,将增加一个全局变量为每个图像你告诉它预加载,然后你回调可以减量计数器。当计数器是回零,调用另一个函数。这个函数将火一旦所有图片加载。

这是图片。一切可以保证加载时美元(文档)时()解雇了。所以,如果你开始你的日常生活,一切都在页面上应该加载。

Answer 5

你可以轻易与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"

Answer 6

< >强一些修改研究-Jerad回答是t当广告页面上的工作。< /强>

你可以轻易与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"

友情链接