Question

我目前正在使用JCarousel突出显示Wordpress中的“精选帖子”。转盘显示在折叠上方，作为我们标题的一部分。它加载后效果很好，但由于我们在具有许多元素的大页面上使用它，因此它必须等待我们的整个页面加载才能启动并显示我们的特色帖子。这意味着它在那里用“加载”gif坐5-10秒，大多数用户只是按它滚动而不是等待它加载。

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

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

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

Answer 1

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

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

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

Answer 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(); 
         });

    });

Answer 3

我会看到是什么让你的页面加载这么长时间。发布您的网址或使用Firebug查看您的网页加载和资源。你的图像太大了吗？您是否加载了太多脚本或jQuery的重复副本？您是否尝试过使用Use Google Libraries « WordPress Plugins等来自Google等CDN加载jQuery？

在页面加载之前，您可以在滑块下方的元素上触发显示：none;即：

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

但我想弄清楚为什么页面加载速度很慢。

Answer 4

正如后续行动一样，以下是我最终要解决的问题：

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

现在jcarousel在Facebook和Twitter的小部件之前加载，使其更快地显示并且似乎花费更少的时间来加载。虽然我相信我的整体页面加载时间是相同的，但我至少找到了重新排列内容的方法，因此页面顶部的项目会显示在侧边栏中缓慢加载的小部件之前。

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

在折叠之上使用JCarousel - 在页面加载完成之前加载JCarousel？

4 个答案: