Как заставить JavaScript загружаться быстрее?

Question

Прямо сейчас у нас есть слайд-шоу изображений, которые используют JavaScript. Однако, когда страница все еще загружается, изображения будут кратко отображаться в обычном перечисленном стиле (с маркерами), прежде чем JavaScript будет прочитан и выполнен. Проблема в том, что мы не хотим, чтобы посетители видели список «голых» изображений, хотя бы ненадолго (иногда это длилось бы 2-3 секунды). Мы хотим, чтобы они немедленно увидели только одно изображение (не список), которое превращается в другое (что делает js).

Это HTML-код для слайд-шоу:

<div class="slideshow"> 
     <ul> 
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li>                                  
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li> 
     </ul> 
</div> 

Это слайд-шоу, которое мы использовали:

http://www.littlewebthings.com/projects/blinds/

и это файл JS:

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

Я думаю, что это может быть проблема с кешем, поскольку демонстрационное слайд-шоу выше показывало «голый» список изображений только один раз. После обновления / повторного посещения он больше не отображается (или все еще отображается, но намного быстрее, чем в первый раз, когда это почти незаметно). Наша, с другой стороны, продолжает перечитывать javascript, как будто это всегда первый раз (если вы понимаете, о чем я).

Answer 1

скрыть весь список с помощью css и показать только первое изображение. Таким образом, пользователь не увидит весь список, кроме первого изображения.

Answer 2

Хотя это не дает прямого ответа на вопрос о том, как заставить его загружаться мгновенно, одним из вариантов будет начать с вашего div, скрытого с <div class="slideshow" id="myId" style="visibility: hidden">, а затем, как только вы узнаете, что ваш JS загрузился, показать его (например, используя jQuery):

$( "#myId" ).css( "visibility", "visible" );

Answer 3

Попробуйте отредактировать стиль ul следующим образом:

ul{
    list-style:none;
}

ul li{
    position:absolute;
}

Оболочка списка должна иметь фиксированную высоту;)

Надеюсь, это поможет