JQuery Fade эффекты на отдельные элементы на нагрузке

Question

Во-первых, я не веб-дизайнер, я просто выродок, пытающийся помочь другу.

Я работаю над графическим веб-сайтом (это веб-сайт с фотографиями), который заставляет страницу загружаться медленно. Самая большая задержка - это миниатюры портфолио, которые обычно скрываются ползунком jquery. Поскольку страница может отображаться неправильно до завершения загрузки (и это выглядит странно), я реализовал загрузочную графику, которая исчезает на $(window).load(), Но так как это ожидает загрузки всей графики, эта графическая загрузка может вращаться в течение 10 секунд или более перед отображением страницы (в зависимости от пропускной способности).

То, что я хочу сделать, это отображать отдельные элементы с симпатичными эффектами jquery по мере их загрузки. Таким образом, зритель может сразу начать видеть контент, и он по-прежнему выглядит красиво.

Поэтому я установил некоторые элементы display:none а затем позвоните fadeIn() и / или slideDown() функция на это в конце моей страницы. Это работает, но иногда fadeIn() Функция запускается до полной загрузки графики, поэтому они все еще появляются. Но если я попытаюсь обернуть fadeIn() функция внутри ('#element').load() это не работает Я могу поместить все эффекты затухания в window.load(), который выглядит красиво, но это побеждает цель, так как он все еще ждет на всех этих миниатюрах.

В качестве альтернативы, если есть способ исключить определенные изображения из window.load() событие? Или добавить галерею миниатюр динамически после window.load()? Прямо сейчас страница довольно статична, просто несколько симпатичных слайдеров jquery и лайтбокс.

Я использую jQuery 1.9.1 из Google. Если есть другой или лучший способ сделать страницу красивой, я весь в ушах.

URL тестового сайта находится здесь. Мое видение, которое я хотел бы видеть, это отобразить фон и загрузить графику, а затем slideDown() логотип с последующим fadeIn() в рамке рисунка удалите загрузочную графику, затемните содержимое рамки рисунка, затем исчезните в нижнем навигационном меню, двигаясь вниз по левому навигационному меню.

(редактировать)
Вот более подробное описание проблемы, которую я пытаюсь обойти. Если загрузка всей страницы занимает 10 секунд:
@ 1 секунда, все мое текстовое содержимое отображается в виде блока и выглядит как плохо спроектированный проект 8-го класса с 1995 года.
@ 2-5 секунд document.ready() fires и скрипт слайдера заканчивают анализ страницы и перемещают элементы контейнера текстового содержимого на место очень нервным и уродливым способом. Теперь макет выглядит хорошо.
@ 10 секунд, наконец, миниатюры завершают загрузку и window.load() пожары.

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

Answer 1

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

Например:

$("img").load(function() {
   $(this).fadeIn(1000);
}).each(function() {
   if(this.complete) $(this).load();
});

Вы можете найти рабочий пример этой реализации ЗДЕСЬ.