Ожидайте до загрузок образа перед работающей функцией
Я пытаюсь создать простую страницу портфеля. У меня есть список ползунков и изображение. При нажатии на ползунок изображение изменится.
Когда миниатюра нажата, я хотел бы иметь изображение, постепенно исчезают, ожидают, пока изображение не загружается, затем отойдите назад в. Проблема, которую я имею прямо сейчас, состоит в том, что некоторые изображения являются довольно большими, таким образом, это постепенно исчезает, затем отходит назад в сразу, иногда в то время как изображение все еще загружается.
Я хотел бы избегать использования setTimeout, так как иногда изображение будет загружаться быстрее, или медленнее, чем время я установил.
Вот мой код:
$(function() {
$('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));
$('ul#thumbs li img').click(function() {
$('img#image').fadeOut(700);
var src = $(this).attr("src");
$('img#image').attr("src", src);
$('img#image').fadeIn(700);
});
});
<img id="image" src="" alt="" />
<ul id="thumbs">
<li><img src="/images/thumb1.png" /></li>
<li><img src="/images/thumb2.png" /></li>
<li><img src="/images/thumb3.png" /></li>
</ul>
3 ответа
Вы можете сделать это следующим образом:
$('img#image').attr("src", src).one('load',function() {
$(this).fadeIn(700);
}).each(function() {
if (this.complete) $(this).trigger('load');
});
Если изображение кэшировано, в некоторых браузерах .load() не сработает, поэтому нам нужно проверить и обработать этот случай, проверив .complete и выполнив загрузку вручную. .one() гарантирует, что обработчик load сработает только один раз, независимо от того, кэширован он или загружен в данный момент.
$(function() {
$('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));
$('ul#thumbs li img').click(function() {
$('img#image').fadeOut(700);
var src = $(this).attr("src");
$('img#image')
.attr("src", src)
.load(function() {
$(this).fadeIn(700);
});
});
});
<img id="image" src="" alt="" />
<ul id="thumbs">
<li><img src="/images/thumb1.png" /></li>
<li><img src="/images/thumb2.png" /></li>
<li><img src="/images/thumb3.png" /></li>
</ul>
Вам нужно поставить анимацию в очередь.
Смотрите эту страницу для дополнительной информации + возможные решения