JCarousel을 폴드 위에 올려 놓기 - 페이지가로드되기 전에 JCarousel을로드 하시겠습니까?

Question

저는 현재 JCarousel을 사용하여 Wordpress의 "추천 된 게시물"을 강조 표시하고 있습니다. 회전 목마는 스크롤바 위에 머리글의 일부로 표시됩니다. 일단로드되면 제대로 작동하지만 많은 요소가 포함 된 큰 페이지의 스크롤없이 볼 수있는 부분 위에 사용하고 있기 때문에 추천 게시물을 시작하고 표시하기 전에 전체 페이지가로드 될 때까지 기다려야합니다. 이것은 "loading"gif가있는 상태에서 5-10 초 동안 그곳에 앉아 있다는 것을 의미하며, 대부분의 사용자는로드 될 때까지 기다리지 않고 그냥 스크롤 할 것입니다.

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

이 느린 로딩은 귀찮은이며, 따라서, 나는 페이지의 나머지가로드하기 전에이 표시됩니다, 그래서 먼저 회전 목마 부하를 가지고 싶습니다. 이 일을 할 수있는 방법이 있습니까?

의견을 보내 주시면 대단히 감사하겠습니다. 감사!

Answer 1

가 여기 내 문제를 해결하고 결국 무엇을 : 내 사이드 ​​바에서 페이스 북 위젯과 트위터 위젯로드 영원히했다 이후

, 그리고 회전 목마 전에로드 있었다, 나는로 설정되어 외부 자바 스크립트 (이 방법을 사용하여 자바 스크립트를 통해 Facebook iframe을로드했습니다 : http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html) window.onload에서 호출하여 dead 최하위로드를 시작합니다.

jcarousel이 Facebook과 Twitter의 위젯보다 먼저로드되어 더 빨리 표시되고로드하는 데 시간이 훨씬 적게 걸립니다. 내 전반적인 페이지 로딩 시간은 같다고 생각하지만 적어도 사이드 바에서 느린 로딩 위젯보다 먼저 내 페이지 상단의 항목이 표시 될 수 있도록 항목을 재정렬하는 방법을 찾았습니다.

도움 주셔서 감사합니다. 이 문제가 해결되어 기쁘다.

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

I가 너무 오래 페이지가 걸릴 만드는 것을 볼 것,

내가 당신에게 예를 표시 할 수 있습니다로드 페이지에있는 요소의 나머지 전에 선택의 내용을 사전로드 시도 하중. URL을 게시하거나 Firebug을 사용하여 페이지로드 및 리소스를 확인하십시오. 이미지가 너무 큽니까? 너무 많은 스크립트를로드하거나 jQuery의 복사본을 복사하고 있습니까? Use Google Libraries « WordPress Plugins과 같은 Google과 같은 CDN에서 jQuery를로드하려고 시도 했습니까?

표시를 트리거 할 수 있습니다. 페이지가로드 될 때까지 슬라이더 아래의 요소에는 아무 것도 표시되지 않습니다. ie :

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

하지만 페이지로드가 왜 느린 지 먼저 알 수 있습니다. 그냥 후속으로

Answer 4

CDN 사용에 대한 추론은 브라우저가 JS를 '병렬'로로드 할 수 있기 때문에 사용해야합니다.

iframe 사용은 아마도 최악의 메커니즘 일 수 있으며 (일반적으로) '수정'이 아니라 '해킹'으로 간주되어야합니다.

LazyLoad, CDN 및 JS Staggering을 사용하는 것을 고려하십시오. 즉, HEAD의 라이브러리 파일과 Footer 영역의 나머지 JS를로드하는 것이 좋습니다.