На этом шаге мы рассмотрим один из способов задержки выполнения эффектов до загрузки изображения.
Анимационный эффект воспроизводится без проблем, но он зависит от скорости соединения с сайтом. Если для загрузки увеличенного изображения требуется некоторое время, то в первые мгновения воспроизведения анимационного эффекта можно наблюдать красный крест как признак испорченного изображения или прежнее изображение. Мы можем сделать эффект более элегантным, если перед запуском анимационного эффекта дождемся, чтобы изображение полностью загрузилось:
$enlargedCover.attr('src', $(this).attr('href'))
.css(startPos)
.show();
var performAnimation = function() {
$enlargedCover.animate(endPos, 'normal',
function() {
$enlargedCover.one('click', function() {
$closeButton.unbind('click').hide();
$priceBadge.hide();
$enlargedCover.fadeOut();
});
$closeButton
.css({
'left': endPos.left,
'top' : endPos.top
})
.show()
.click(function() {
$enlargedCover.click();
});
$priceBadge
.css({
'right': endPos.left,
'top' : endPos.top
})
.text(price)
.show();
});
};
if ($enlargedCover[0].complete) {
performAnimation();
}
else {
$enlargedCover.bind('load', performAnimation);
}
Рассмотрим два возможных сценария: изображение может быть получено практически мгновенно (возможно, благодаря работе механизма кэширования), и для его загрузки требуется некоторое время. В первом случае атрибут complete изображения будет иметь значение true, поэтому мы сразу можем вызвать нашу новую функцию performAnimation(). Во втором случае необходимо подождать, пока изображение загрузится полностью, и только потом вызывать функцию performAnimation(). Это редкий случай, когда предпочтительнее использовать стандартное событие DOM load, а не событие ready, предоставляемое библиотекой jQuery. Событие load возбуждается окном, изображением или фреймом, когда будет загружено все содержимое, поэтому мы можем дождаться появления этого события, чтобы обеспечить корректное отображение изображения. Анимационный эффект воспроизводится, только когда запускается обработчик события.
Примечание. Для большей ясности при подключении обработчика события вместо сокращенного метода .load() мы использовали вызов .bind('load'), поскольку существует еще один метод .load(), который является методом поддержки технологии AJAX. Эти два способа являются взаимозаменяемыми.
Браузеры Internet Explorer и Firefox по-разному обрабатывают ситуацию, когда изображение уже находится в кэше браузера. Так, Firefox немедленно возбуждает событие load, a Internet Explorer никогда не возбудит это событие, потому что загрузка фактически уже была выполнена. Проверка атрибута complete компенсирует это различие в реализациях.
Рис.1. Реализация задержки воспроизведения анимационных эффектов
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим добавление индикатора загрузки.
