Я собрал небольшой маленький микросайт, который вы можете увидеть на http://monterraauction.com. Если у вас нет сверхбыстрого соединения (и ничего не кэшировано), самые последние элементы для загрузки - это фоновые изображения, которые используются для замены текстового изображения CSS (в первую очередь это h1#head вверху, с фоновым изображением 7 КБ). Ничего изнурительного, но выглядит немного неловко. И я задаю этот вопрос из любопытства больше всего на свете;) Также обратите внимание, что это происходит в Firefox, но не в Chrome.
Теперь, под h1#head, у меня есть слайд-шоу на основе jquery.cycle.lite в div#photo. В разметке HTML есть в общей сложности 13 тяжелых файлов изображений, которые составляют каждый из слайдов. Если я уберу все, кроме первого слайда, то проблема исчезнет! Значит, CSS-фоновые изображения загружаются после ... эти HTML-изображения сделаны? Но вот что смущает:
Я проверяю это в YSlow ... CSS-фоновые изображения имеют намного меньшее время отклика, чем все слайды в #photo. Сразу после того, как все файлы JS заканчивают загрузку, фактически. Так почему же они не появляются первыми?
Я попробовал $('#photo img:last-child').load(function() { alert('Locked and Loaded!')});, но фоновые изображения всплывают за некоторое время до того, как сработает предупреждение, поэтому я предполагаю, что он не ждет, пока загрузится последний слайд (по общему признанию, я немного NS JOOB, так что, возможно, я я просто делаю неправильное предположение).
Я также попытался закомментировать весь материал jquery.cycle.lite, так что я знал, что у меня не было JS, манипулирующего элементами DOM в #photo, но это не было проблемой. Я попытался поместить все JS внизу документа, прямо перед </body>, но это не сработало. Наконец, я попытался отключить javascript, и, конечно, фоновое изображение css загружается намного раньше изображений в #photo, так что это определенно вещь JS (амирит?)
Полагаю, очевидное решение здесь - пометить слайды как ССЫЛКИ, а не как IMG, и сделать так, чтобы Javascript вставил эти 12 дополнительных изображений слайд-шоу после того, как DOM будет готов - пользователям без javascript в любом случае не нужно загружать дополнительные изображения , Но мне опять любопытно:
Почему удаление лишних HTML-изображений из #photo решает проблему? И почему CSS-фоновые изображения появляются после загрузки HTML-изображений, хотя YSlow говорит, что CSS-фоновые изображения загружаются первыми? Видя, как это происходит в FF, но не в Chrome, это просто проблема с браузером?
Я ценю любую информацию, которую вы, ребята, могли бы дать мне!