Помогите сделать мою галерею JQuery Fading более эффективной

Question

На домашней странице этого сайта - http://bit.ly/a3IoV5 - У меня большая галерея замирания JQuery.

Вот JQuery:

$('.fadein img').addClass('js'); 

$(function() { 
    $('.fadein').children().eq(0).appendTo('.fadein').show(); 
    setInterval(function() { 
     $('.fadein :first-child').hide().appendTo('.fadein').fadeIn(2000); 
    }, 8000); 
}); 

СМЧ:

.js .fadein img { display: none; } 
.js .fadein img:first-child { display: block; } 
.fadein img { position: absolute; right: 0; top: 0; width: 1000px; height: 300px; } 

и HTML

<div class="fadein"> 
<img src="header1.png" /> 
<img src="header2.png" /> 
<img src="header3.png" /> 
<img src="header4.png" /> 
<img src="header6.png" /> 
<img src="header7.png" /> 
<img src="header9.png" /> 
<img src="header10.png" /> 
<img src="header12.png" /> 
</div> 

Я надеялся, что там было какое-то загрузка изображения трюка, который поможет скорость загрузки самой страницы. Любая помощь будет оценена по достоинству.

Answer 1

Загрузите изображения после того, как страница будет готова. В зависимости от размера изображения это может значительно увеличить скорость.

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

Answer 2

Просто происходит от кода, который вы поставили, если вы добавляете класс «JS» для всех IMG тегов под элементом с FadeIn класса в соответствии с:

$('.fadein img').addClass('js'); 

Ваш CSS селекторы может потребоваться изменение:

/* Your Current CSS */ 
.js .fadein img { display: none; } 
.js .fadein img:first-child { display: block; } 

/* Suggested CSS */ 
.fadein img.js { display:none; } 
.fadein img.js:first-child { display:block; } 

Ваши текущие коды будут работать, если родительский элемент также имеет JS, но не будет влиять на элементы, которые вы добавляете в этот класс, чтобы использовать первое действие jQuery.

Если вы обеспокоены посетителями видя задержку при первоначальной загрузке страницы, вы можете быть в состоянии обеспечить, по крайней мере пустышку графики, добавив фоновое изображение в FadeIn элемента, и, возможно, использовать изображение, которое более сжатый/базовый (например, JPEG с низким качеством).

/* Suggested CSS */ 
.fadein { height:300px;width:1000px;background:#F5F5F5 url('http://pottstownarts.org/wp-content/themes/paca/files/headerimgs/basic.jpg') no-repeat right top; } 

Это изображение будет покрыто галереей, как только он начинает работать (чтобы быть положительным, вы можете всегда иметь JQuery удалить CSS фоновое изображение установки, как только галерея начинает прокатки, поэтому любые полупрозрачные изображения не будет быть запятнанными).

$('.fadein').css('background-image' , '');