1

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

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

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

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

4

4 回答 4

1

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

iframe 的使用可能是最糟糕的机制，应该被认为是“黑客”而不是任何事情的“修复”（通常）。

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

于 2012-08-30T16:36:38.367 回答
0

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

    });
于 2010-08-01T19:17:19.903 回答
0

我会看看是什么让您的页面需要这么长时间才能加载。发布您的 URL 或使用Firebug查看您的页面加载和资源。你的图片是不是太大了？您是否加载了太多的脚本或 jQuery 的重复副本？您是否尝试过使用 Google Libraries « WordPress Plugins从 Google 等 CDN 加载 jQuery ？

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

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

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

于 2010-08-01T20:19:45.060 回答
0

作为后续行动，这就是我最终为解决我的问题所做的事情：

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

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

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

于 2010-08-16T18:57:01.817 回答