Дождитесь загрузки изображения, прежде чем выполнять функцию

Question

Я пытаюсь создать простую страницу портфолио. У меня есть список превью и изображение. При нажатии на большой палец изображение изменится.

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

Я бы хотел избежать использования 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>

Answer 1

Вы можете сделать это так:

$('img#image').attr("src", src).one('load',function() {
  $(this).fadeIn(700);
}).each(function() {
  if (this.complete) $(this).trigger('load');
});

Если изображение кэшируется, в некоторых браузерах .load() не запускается, поэтому нам нужно проверить и обработать этот случай, проверив .complete и запустив загрузку вручную. .one() гарантирует, будет ли он кэширован или загружен в то время, что обработчик load запускается только один раз.

Answer 2

 $(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>

Answer 3

Вам нужно поставить анимацию в очередь.

См. Эту страницу для получения дополнительной информации + возможные решения