Фундамент загрузки орбиты в орбиту не исчезает

Question

В документации говорится, что на орбите будет загружен класс .orbit после загрузки всех необходимых файлов. Но на моем сайте он никогда не останавливает счетчик и не загружает элемент, а не изображения. Кажется, он не добавляет .orbit к классу при выполнении JavaScript.

Вот HTML

 <li> 
      <img src="./img/demos/demolarge1.png" /> 
      <div class="orbit-caption">The living room of the future</div> 
     </li> 
     <li> 
      <img src="./img/demos/demolarge2.png" /> 
      <div class="orbit-caption">The new emporium by London</div> 
     </li> 
     <li> 
      <img src="./img/demos/demolarge3.png" /> 
      <div class="orbit-caption">Warren Buffet's 8th stake in the real estate market</div> 
     </li> 
    </ul> 
</div> 

А вот CSS

#featured { background: url(../img/spinner.gif) center center #f4f4f4 no-repeat; height: 450px; } 
#featured img { display: none; } 
#featured.orbit-container { background: none; } 
#featured.orbit-container img { display: block; } 

Что я здесь отсутствует? Веб-сайт находится на biggdesigns.com Спасибо!

Решение: Я понял, что использовал документацию версии 3 с установленной версией 4. Г!

Answer 1

Создайте отдельный div для загрузки gif с классом .loading и установите gif в качестве фона для этого. Затем дайте вашим изображениям что-то вроде .featuredIMG.

В вашем CSS выполните следующие действия:

.featuredIMG{display: none;} 

Затем в JQuery, связать ползунок инициализацию и скрыть/показать для соответствующих классов в $(window).load события:

$(window).load(function(){ 
    $("#featured").orbit(); 
    $(".featuredIMG").show(); 
    $(".loading").hide(); 

}); 

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

РЕДАКТИРОВАТЬ: поместите погрузочный отсек вне поля #featured и установите его высоту и ширину по высоте слайдов.