Использование JCarousel над сгибом - загрузка JCarousel до того, как страница закончила загрузку?

Question

В настоящее время я использую JCarousel для выделения «признанных сообщений» в Wordpress. Карусель отображается над складкой, как часть нашего заголовка. Он работает хорошо, как только он загружается, но поскольку мы используем его выше складки на большой странице со многими элементами, он должен дождаться загрузки всей нашей страницы, прежде чем она начнет и покажет наши избранные сообщения. Это означает, что он сидит там с «загрузкой» gif в течение 5-10 секунд, и большинство пользователей просто прокручивают его, а не ждут его загрузки.

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

Эта медленная загрузка надоедливая, и поэтому я хотел бы иметь нагрузку карусельной первой, поэтому он будет отображаться до загрузки остальной части страницы. Есть ли способ для меня сделать это?

Любые предложения были бы весьма полезными. Благодаря!

Answer 1

Подобно тому, как катамнестическая, вот что я в конечном итоге делаю, чтобы решить мою проблему:

Поскольку виджет Facebook и виджеты Twitter на боковой панели взяли навсегда, чтобы загрузить, и нагружал до карусели, я превращал их в внешние javascripts (загрузили iframe Facebook через javascript, используя этот метод: http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html) и вызвали их на window.onload, чтобы они начали загружать мертвые последними.

Теперь 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

я хотел бы видеть, что делает вашу страницу так долго нагрузки. Отправьте свой URL-адрес или используйте Firebug, чтобы посмотреть на загрузку и ресурсы вашей страницы. Ваши изображения слишком велики? Вы загружаете слишком много скриптов или дубликатов копий jQuery? Вы пытались загрузить jQuery из CDN, например Google, с помощью Use Google Libraries « WordPress Plugins?

Вы можете вызвать дисплей: нет элементов под ползунком, пока страница не загрузится; то есть:

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

Но я бы понял, почему загрузка страницы происходит медленно.

Answer 4

Причины использования CDN предназначены для того, чтобы браузеры могли загружать JS в «parallel» и должны использоваться.

Использование iframe, вероятно, является наихудшим механизмом и должно считаться «взломом», а не «исправлением» для чего-либо (в общем).

Рассмотрите возможность использования LazyLoad, CDN и JS Staggering - то есть загрузки файлов библиотеки в HEAD и остальной части JS в области нижнего колонтитула.