在页面加载完成之前在JCarousel中使用JCarousel？

我目前使用JCarousel在Wordpress中突出显示“精选帖子”。旋转木马显示在折叠上方，作为我们标题的一部分。它在加载后效果很好，但由于我们在包含很多元素的大页面上使用它，因此它必须等待整个页面加载，然后才能启动并显示我们的精选帖子。这意味着它在5-10秒内就会有一个“加载”gif，大多数用户只会滚动它而不是等待它加载。在页面加载完成之前在JCarousel中使用JCarousel？

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

这加载速度慢很麻烦，因此，我想先有旋转木马加载，所以它会显示在页面的其余部分加载之前。有什么办法可以做到这一点？

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

来源

2010-08-01 zoe739

您是在页眉中加载传送带还是在''标签之前加载传送带？如果您在''标签之前执行此操作，是否尝试将其放入页眉中？ – 2010-08-01 17:52:41

是的，我把它加载到标题中。尽管如此，它仍然会等待整个页面加载，然后才会显示。我们用来启动它的代码是这样的： <脚本类型= “文本/ JavaScript的”> jQuery的（文件）。就绪（函数（）{ jQuery的（ '＃mycarousel'）的jCarousel（{ 滚动。：2 }）; }）; – zoe739 2010-08-01 17:54:36

它正在等待'（document）.ready'。我猜测Wordpress正在做一些让DOM不能做好准备的繁重工作。你可以尝试在不使用'（document）.ready'的情况下加载它，但问题是你需要'＃mycarousel'在你调用之前先稳定下来。 – 2010-08-01 17:58:45

正如随访，这里就是我最后做，以解决我的问题：

由于Facebook构件和Twitter小部件在我的侧边栏了永远载入和传送带之前，加载，我把他们变成外部javascripts（通过JavaScript使用这种方法加载Facebook的iframe：http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html）并在window.onload上调用它们，所以它们将开始加载最后一个。

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

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

来源

2010-08-16 18:57:01 zoe739

#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-01 19:17:19

如果你仍然在'（document）.ready'中包装传送带，那会怎样？ – 2010-08-01 19:34:52

嗨罗伯特，起初我想过使用'$（window）.load（）'，后来改变了我的想法'$（document）.ready（）'。因为在使用'（window）.load（）'时，它需要等到页面内容完全加载**，然后使用'（document）.ready（）'加载'Images'与页面一起完成内容http://www.javascriptkit.com/dhtmltutors/domready.shtml – 2010-08-01 20:59:24

我会看到什么让你的页面很长时间才能加载。发布您的网址或使用Firebug来查看您的网页加载和资源。你的图片太大了吗？你正在加载太多的脚本或jQuery的副本？你有没有尝试从谷歌等CDN加载jQuery与Use Google Libraries « WordPress Plugins？

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

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

但我想知道为什么页面加载速度慢。

来源

2010-08-01 20:19:45 markratledge

我的页面肯定有很多东西要加载，所以它肯定是一个问题。目前，需要加载的时间最长的项目包括：多个Google广告代码，统计跟踪javascript（即Quantcast，Google Analytics，Compet.com），边栏中的“Facebook粉丝”框和Twitter更新，所有这些都需要加载减慢页面速度的外部脚本。不过，我认为这些必要的大部分都是必要的，所以虽然我可以专注于优化，但是消除它们现在不是真正的选择。 – zoe739 2010-08-01 21:29:05

虽然我们还没有尝试从CDN加载jQuery，但我们完全没有使用CDN，尽管我们正在考虑它。可能值得一试。 – zoe739 2010-08-01 21:29:53

这就是你的问题的根源：所有那些被加载的垃圾。首先清理一些。由于页面加载速度缓慢，因此您可能会损失比您知道的人数更多的人（请查看所有统计信息以查看跳出率）。 – markratledge 2010-08-01 23:14:34

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

iframe的使用可能是最糟糕的机制，应该被认为是'破解'而不是'修复'（通常）。

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

来源

2012-08-30 16:36:38 shantopagla

在页面加载完成之前在JCarousel中使用JCarousel？

回答

相关问题