Делающие изображения постепенно появляются на загрузке образа с помощью jQuery
В то время как это было больше логики, чем программирование по сути, один я действительно наслаждался назад в начальной школе, был Начальные загрузки Рокки . Это имело датчики, логические элементы И, логические элементы ИЛИ, логические элементы НЕ, провода, таймеры и все виды другого материала. Фантастическая программа для обучения логики ребенка.
Переходят к ссылке, и можно все еще играть ее!
4 ответа
Сначала вы можете убедиться, что ваши изображения скрыты по умолчанию (устраняя необходимость в ваших вызовах jQuery hide ) с помощью некоторого CSS,
.contentwrap img {
display:none;
}
А затем в вашем документе .ready, вы можете попробовать следующее. Я допускаю, что здесь будет некоторое дублирование в том, что некоторые изображения могут (за кадром) попытаться исчезнуть дважды, но конечный результат будет выглядеть точно так же. Это компромисс, который я признаю, пытаясь дать простой ответ на этот вопрос.
Ситуация будет такова, что в вашем document.ready некоторые изображения могут быть загружены (особенно те, которые уже были кэшированы), а некоторые еще могут быть ожидающими.
// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
$(this).fadeIn(1000);
});
Поскольку jQuery будет "складывать" ваши эффекты анимации, когда что-то полностью исчезнув, вы можете снова вызвать fadeIn, и ничего не должно (явно) произойти.
Если это было неприемлемо, Вы, вероятно, могли бы разработать более сложный способ проверки того, какие изображения были затенены, а какие нет, прежде чем устанавливать для них событие загрузки.
Удачи!
иногда не все изображение исчезает.
Да, обычно это довольно простая проблема: некоторые изображения заканчивают загрузку до того, как вы назначили им обработчик события загрузки. Это особенно вероятно, когда изображения кэшируются.
Если изображения находятся в HTML, к сожалению, единственный надежный способ - это включить (крайне уродливый) встроенный атрибут onload:
<img src="..." alt="..." onload="$(this).fadeIn();">
вы вызываете эту функцию в Document.ready?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
http://www.learningjquery.com/2006/09/introduction-document-ready
Я недавно имел дело с этим беспорядком. Я ответил на этот аналогичный вопрос, но это не совсем то, что вы спрашиваете ...
Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)