在首屏使用 JCarousel - 在页面完成加载之前加载 JCarousel？答案

【问题标题】：Using JCarousel above the fold - loading JCarousel before page has finished loading?在首屏使用 JCarousel - 在页面完成加载之前加载 JCarousel？
【发布时间】：2010-08-01 17:45:29
【问题描述】：

我目前正在使用 JCarousel 在 Wordpress 中突出显示“精选帖子”。作为标题的一部分，轮播显示在首屏上方。它在加载后运行良好，但由于我们在包含许多元素的大页面的首屏上使用它，它必须等待我们的整个页面加载后才能启动并显示我们的特色帖子。这意味着它会在 5-10 秒的“加载” gif 中停留，大多数用户只会滚动它而不是等待它加载。

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
        jQuery('#mycarousel').jcarousel({ scroll : 2 }); 
    }); 
</script>

这种缓慢的加载很麻烦，因此，我希望先加载轮播，这样它就会在页面的其余部分加载之前显示出来。我有什么办法可以做到这一点？

任何建议将不胜感激。谢谢！

【问题讨论】：

您是在页眉中加载轮播，还是在 </body> 标记之前加载？如果您是在 </body> 标记之前执行此操作，您是否尝试将其放在页眉中？
是的，我已将它加载到标题中。但是，它仍然等待整个页面加载，然后才会显示。我们用来启动它的代码是这样的：
它正在等待(document).ready。我猜想 Wordpress 正在做一些繁重的工作，使 DOM 无法准备好。您可以尝试在不使用 (document).ready 的情况下加载它，但问题是您需要先将 #mycarousel 稳定后再调用它。
对。所以我想我的问题是：我能对此做些什么吗？有没有办法修改我的页面，以便在页面的其余部分加载之前我需要“准备好”的元素可用？或者如果这是不可能的，我应该使用 JCarousel 以外的东西吗？我正在研究延迟加载，但我不确定这是否适用..
如果您对页面的其余部分有更多控制权，那么您可以仅使用 jCarousel 而不是“首屏”的其余内容来加载页面。然后在页面加载后使用 Ajax 拉入该内容。这样 jCarousel 就不会在开始之前等待其余的内容。不确定你是否有这么多的控制权。

标签： javascript jquery wordpress jcarousel

【解决方案1】：

使用 CDN 的原因是浏览器能够“并行”加载 JS，并且应该被使用。

iframe 的使用可能是最糟糕的机制，应该将其视为对任何事物的“破解”而不是“修复”（一般而言）。

考虑使用 LazyLoad、CDN 和 JS 交错 - 即在 HEAD 中加载库文件，在页脚区域中加载其余 JS。

【讨论】：

【解决方案2】：

#mycarousel 内容的预加载怎么样？如果您查看jCarousel Plugin 的来源，作者还没有编写任何用于预加载内容的代码块（例如Images）。因此，请尝试在页面中的其余元素仍在加载之前预加载选择器的内容

我可以给你举个例子，

    $(document).ready(function() {
         var img;   
         $('#mycarousel').find('img').each(function() {
              img = new Image();
              img.src = $(this).attr('src');   //preloads your Images
         });

         $(img).load(function() {  //perform action after the last Image is loaded
              $('#mycarousel').jcarousel(); 
         });

    });

【讨论】：

如果您仍在使用(document).ready 包裹旋转木马，这有什么帮助？
嗨罗伯特，一开始我想用$(window).load()，后来改用$(document).ready()。因为在使用(window).load() 时需要等待页面内容完全加载，而在使用(document).ready() 时，Images 的加载与页面内容javascriptkit.com/dhtmltutors/domready.shtml 一起完成

【解决方案3】：

我想看看是什么让您的页面加载时间如此之长。发布您的 URL 或使用 Firebug 查看您的页面加载和资源。你的图片是不是太大了？您是否加载了太多的脚本或 jQuery 的重复副本？你试过用Use Google Libraries « WordPress Plugins从像谷歌这样的CDN加载jQuery吗？

您可以在滑块下方的元素上触发 display:none 直到页面加载；即：

document.write('<style type="text/css">element{display:none}</style>');
jQuery(function($) {
$('element').css('display','block');
});

但我会先弄清楚页面加载缓慢的原因。

【讨论】：

我的页面肯定有很多东西要加载，所以这肯定是一个问题。目前加载时间最长的项目包括：多个 google 广告代码、统计跟踪 javascript（即 quantcast、google analytics、competition.com）、侧边栏中的“Facebook Fan”框和 Twitter 更新，所有这些都需要加载会减慢页面速度的外部脚本。不过，我认为其中大部分是必要的，所以虽然我可以专注于优化，但现在消除它们并不是一个真正的选择。
我还没有尝试过从 CDN 加载 jQuery - 我们根本没有使用 CDN，尽管我们肯定在研究它。可能值得一试。
这是您问题的根源：所有正在加载的垃圾。先清理一些。由于页面加载缓慢，您可能失去的人比您知道的要多（检查所有这些统计数据以查看跳出率）。
我明白你在说什么，但我不认为消除所有必须加载的内容就是答案。我已经看到许多网站运行与我们相同的东西，但加载速度更快 - 这就是为什么我认为答案在于优化或尝试不同的代码，而不是简单地从页面中删除内容，直到加载速度更快。
@jcarousel：也许你可以在这里发布两个链接；一个包含您的页面，另一个包含一个以您认为应该的方式加载的比较页面。

【解决方案4】：

作为后续，这是我最终解决问题的方法：

由于我侧边栏中的 Facebook 小部件和 Twitter 小部件需要很长时间才能加载，并且在轮播之前加载，所以我将它们转换为外部 javascript（使用此方法通过 javascript 加载 Facebook iframe：http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html）并调用它们在 window.onload 上，所以他们会最后开始加载。

现在 jcarousel 在 Facebook 和 Twitter 的小部件之前加载，使其显示得更快并且加载时间似乎更少。尽管我相信我的整体页面加载时间是相同的，但我至少找到了一种重新排列内容的方法，这样我页面顶部的项目就会显示在侧边栏中加载缓慢的小部件之前。

感谢您的所有帮助！很高兴解决了这个问题。

【讨论】：