1

現在、JCarousel を使用して、Wordpress で「注目の投稿」を強調表示しています。カルーセルは、ヘッダーの一部としてスクロールせずに見える位置に表示されます。読み込まれるとうまく機能しますが、多くの要素を含む大きなページでスクロールせずに見える範囲で使用しているため、注目の投稿を開始して表示するには、ページ全体が読み込まれるまで待つ必要があります. これは、「読み込み中」の gif が 5 ～ 10 秒間表示されたままになることを意味し、ほとんどのユーザーは、読み込まれるのを待つのではなく、スクロールするだけです。

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

この遅い読み込みは面倒なので、最初にカルーセルを読み込みたいので、ページの残りの部分が読み込まれる前に表示されるようにします。これを行う方法はありますか？

どんな提案でも大歓迎です。ありがとう！

4

4 に答える 4

1

CDN を使用する理由は、ブラウザーが「並列」で JS をロードできるようにするためであり、使用する必要があります。

iframe の使用はおそらく最悪のメカニズムであり、(一般的に) 何かの「修正」ではなく「ハック」と見なされるべきです。

LazyLoad、CDN、および JS Staggering の使用を検討してください。つまり、ライブラリ ファイルを 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

フォローアップとして、問題を解決するために最終的に行ったことは次のとおりです。

サイドバーの 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 に答える
0

あなたのページの読み込みに時間がかかっている原因がわかります。URL を投稿するか、Firebugを使用して、ページの読み込みとリソースを確認してください。画像が大きすぎますか？ロードしているスクリプトが多すぎたり、jQuery のコピーが重複していませんか? Use Google Libraries « WordPress Pluginsを使用して、Google などの CDN から jQuery をロードしようとしましたか?

ページが読み込まれるまで、スライダーの下の要素で display:none をトリガーできます。すなわち:

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

しかし、最初にページの読み込みが遅い理由を理解します。

于 2010-08-01T20:19:45.060 に答える