Question

我为朋友构建了这个WP主题（我知道有一些明显的样式问题，需要注意的），但我的问题是在任何页面元素之前加载包装器... < / p>

http://www.touchlinetalk.com

如果你加载或重新加载页面，你会注意到徽标和一些广告在背景空白区域之前加载？如果首先加载背景空白，然后是其他元素，那么该网站看起来会更清洁/更整洁/更现代。

我已经尝试过指定一个高度和其他一些我想要的东西但没有骰子 - 我似乎无法让它按照我的意愿行事。我觉得这是一个基本问题，这是一个我无法弄清楚的基本问题......

任何帮助？

Answer 1

我不知道你是否能够解决这个问题，当然不容易。您的页面正确加载，图像是请求的第8个资源（如HttpFox中所示）。网站按顺序逐行解析。您的网站正在加载HTML，然后是样式表，样式表下载和解析（我的解释）的几个资源，然后是您的背景图像。您的图像很大，每a test at webpagetest.org下载需要12秒。在下载之前，您无法真正显示图像，老实说，您是否真的想让人们等待12秒才能看到任何内容可以？图像是装饰。这不重要。你真的想失去交通吗？

有些事情可以帮助你。首先，这个形象是巨大的。你有什么办法可以减少它的大小吗？我的意思是，为什么所有的空白in the center of the image？您只使用外边缘。其次，鼓励缓存。把它放在你的.htaccess文件中。

<FilesMatch "\.(ico|jpg|jpeg|png|gif|swf)$">
    ExpiresActive On
    ExpiresDefault "access plus 2 weeks"
</FilesMatch>

另外，我posted on another topic about caching如果你想检查一下。

修改

确定。看起来你有许多内联加载的脚本，就像加载<script type="text/javascript">var vclk_options = {sid:64560,media_id:1,media_type:1,version:"1.3"};</script>...内的<div id="headAdvert">一样。这些内联脚本将“阻止”您的页面加载，直到它们完成。您将不得不在页面内容之后加载这些内容以防止这种情况发生。那些广告服务器没有可以使用的异步脚本吗？ Something like this one？

Answer 2

如果您考虑使用jquery，那么您可以试试这个：

首先使用您的css隐藏#bound div包含的内容

#bound{
 display:none;
}

让系统等待2秒，直到BG包装器完全加载

<script>
 setTimeout('show_content()', 2000);
 function show_content(){
     $("#bound").fadeIn();
 }
</script>

您可以通过更改setTimeout时间值

来延长要显示的整个内容的秒数

如何让我的BG包装器一直加载到页面上，或者在内容之前显示？

2 个答案: