在頁面加載完成之前在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？

回答

相關問題