页面加载问题的预加载器图片

-1

我很抱歉提出一个很小的问题，但我觉得在这个问题上有点无奈。我在我的网页加载在一个非常简单的方式集成在一个预加载程序图片页面加载问题的预加载器图片

HTML（股利加载预加载图像）

<div class="se-pre-con"></div>

jQuery来触发预加载页面加载

$(window).load(function() { 
     // Animate loader off screen 
     $(".se-pre-con").fadeOut(); 
    });

有点造型。 CSS

<style> 
.no-js #loader { display: none; } 
.js #loader { display: block; position: absolute; left: 100px; top: 0; } 
.se-pre-con { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
}

问题当页面加载时，它溅起的预加载图像之前的一次，然后将预加载程序图片后加载完成其效果。理论上，预加载器应该在页面加载之前显示。我希望你们中的任何人都能弄清楚我在哪里做错了什么？

问候

来源

2015-05-27 Malik Mudassar

给在CSS显示图像：无; – Andrew

谢谢@安德鲁答复如此之快，这个技巧确实提高了我的网页加载速度，但现在我根本看不到预加载器。我在class .se-pre-con中放置了display：none，这是我的预加载器的div。我还有另外一个问题，如果你不问我，我可以在页面卸载时显示相同的预加载器，而不是在加载时显示吗？ –

我觉得你的HTML的格式不正确，你所提供的链接：

我会做的是确保HTML页面有类似这样的结构：

<html> 
    <head> 
    <script> 
    </script> 
    </head> 
    <body> 
     <div class="se-pre-con"></div> 
     <div class="site-content"></div> 
    </body> 
</html>

而且你的脚本标签中有以下方法：

$(window).load(function() { 
    $(".site-content").show(); //or fadeIn (what ever suits your needs) 
    $(".se-pre-con").fadeOut(); 
});

而且在你的CSS确保您设置

.site-content{  
    display: none; 
}

编辑：（要随时回答comment-调用装载机你的问题）

我可能会创建一个函数是这样的：

function toggleLoader(show){ 
    if(show == true){ 
     $(".se-pre-con").show(); 
     $(".site-content").fadeOut(); 
    } 
    else{ 
     $(".site-content").show(); 
     $(".se-pre-con").fadeOut(); 

    } 
}

然后在窗口负载你拨打：toggleLoader（假），

当你犯了一个要求电话：toggleLoader（真），

而当你收到响应电话：toggleLoader（假）。

来源

2015-05-27 09:50:22 EaziLuizi

这很有道理@ EaziLuizi，而是在预载入器淡出前显示网站内容我可以在预载入器淡出后显示网站内容吗？ –

是的，当然，但我不会使用“淡入”然后，而是立即显示“显示” – EaziLuizi

谢谢先生，不要介意我问一个愚蠢的问题，因为我是一个缓慢的学习者。我可以在页面加载和卸载中显示预加载器图像吗？当前页面加载显示预加载器，但是当发送请求像搜索新凭证时，需要一点时间。如何在发送请求后立即显示相同的预加载器映像 –

页面内容也在页面加载可见与装配元件沿所以没有任何序列内容加载第一，但是你可以通过下面的代码马槽，假设你有两个DIV，一个pre-loader DIV另一个站点container格

<body> 
    <div class="se-pre-con"></div> 
    <div id="container" style="display: none;"> 
     <!-- site content here --> 
    </div> 
</body>

在container格添加display: none风格让网站内容cant't在页面加载闪烁..当页面加载，那么你可以show div容器，请参见下面的代码

$(window).load(function() { 
     // Animate loader off screen 
     $("#container").show(); 
     $(".se-pre-con").fadeOut(); 
    });

来源

2015-05-27 09:47:16 Girish

刚刚通过您的页面链接，并注意到display:none;被添加到.se-pre-con如下所示。请删除display:none;属性。它的作品好友！

.se-pre-con { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
 
    display: none; 
 
}

来源

2015-05-27 10:00:03 obuliraj

是@ obuliraj。在安德鲁告诉我的第一个答案中，我误解了它并把它放在那里。我只是编辑了它并在我的测试服务器上推送了更新。我的其他问题仍然与你和Girish和EaziLuizi相同，在页面卸载时显示预加载器是否合乎道德或我可以吗？我的意思是这是否执行在页面加载之间显示预加载器的任务 –

页面加载问题的预加载器图片

回答

相关问题