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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

我想看看是什么导致您的页面加载时间如此之长。发布您的 URL 或使用 Firebug 查看您的页面加载和资源。您的图片太大了吗？您是否加载了太多脚本或重复的 jQuery 副本？您是否尝试过使用 使用 Google Libraries « WordPress 插件?

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

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

但我首先要弄清楚为什么页面加载很慢。

Answer 3

预加载 #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(); 
         });

    });

Answer 4

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

iframe 的使用可能是最糟糕的机制，应该被视为“黑客”而不是任何东西的“修复”（一般而言）。

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