JQuery ajax, подождите, пока изображения или iframe не будут полностью загружены до запуска функции

Question

Я работаю над созданием онлайн-портфеля. Когда пользователь нажимает на определенный проект, я пытаюсь загрузить информацию о проекте с помощью ajax и вставить его в текущую страницу. Проблема, с которой я сталкиваюсь, заключается в том, что функция, выполняемая при загрузке(), не знает, когда содержимое полностью загружено, поэтому jquery пытается запустить анимацию, которая отображает div до того, как все будет загружено. Страница, которую я загружаю, имеет один из двух типов контента (или обоих). Он имеет либо изображения, либо iframe для встраивания Vimeo.

Вот мой код:

//On project click, run function 
$j(".project-ajax-click").click(function(e){ 

    var pageLoad = $j(this).prop("href"); 

    //Bring project div to the top of page 
    $j('html, body').stop().animate({'scrollTop': $j('#project').offset().top-$j('.navbar').height()}, 900, 'swing'); 

    $j('.project-container') 
     .slideUp() 
     .load(pageLoad, function(){ 
      $j(".project-flex").flexslider({ 
       animation: "slide", 
       slideshow: false, 
       directionNav: false, 
       controlNav: false, 
      }); 

      $j('.flex-prev, .flex-next').on('click', function(){ 
       var href = $j(this).attr('href'); 
       $j('.project-flex').flexslider(href) 
       return false; 
      }); 

      $j(".project-close").click(function(e){ 
       $j('.project-container').slideUp(function(){ 
        $j('.project-info').remove(); 
       }); 
       e.preventDefault(); 
      }); 

      $j('.project-container').slideDown(); 
     }); 
    e.preventDefault(); 
}); 

Это пример Аякса контента будет загрузка (этот проект включает в себя один Vimeo слайда и два изображения).

<div class="project-ajax"> 
    <div class="project-flex"> 
     <ul class="slides"> 
      <li><div class="vimeo-wrapper"><iframe src="//player.vimeo.com/video/75576745" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></li> 
      <li><img src="http://placehold.it/640x480" width="100%"></li> 
      <li><img src="http://placehold.it/640x480" width="100%"></li> 
     </ul> 
    </div> 
    <div class="project-description"> 
     <h1>Project Title</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet massa nec eros elementum rhoncus. Sed ex urna, sagittis a cursus nec, tristique eu arcu.</p> 
    </div> 
</div> 

В настоящее время, все загружается нормально, но slideDown() анимация работает, до того, как содержание полностью загружен и вызывает скачок.

Answer 1

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

//On project click, run function 
$j(".project-ajax-click").click(function(e){ 

    var pageLoad = $j(this).prop("href"); 

    //Bring project div to the top of page 
    $j('html, body').stop().animate({'scrollTop': $j('#project').offset().top-$j('.navbar').height()}, 900, 'swing'); 

    $j('.project-container') 
     .slideUp() 
     .load(pageLoad, function(){ 
      $j(".project-flex").flexslider({ 
       animation: "slide", 
       slideshow: false, 
       directionNav: false, 
       controlNav: false, 
      }); 

      $j('.flex-prev, .flex-next').on('click', function(){ 
       var href = $j(this).attr('href'); 
       $j('.project-flex').flexslider(href) 
       return false; 
      }); 

      $j(".project-close").click(function(e){ 
       $j('.project-container').slideUp(function(){ 
        $j('.project-info').remove(); 
       }); 
       e.preventDefault(); 
      }); 
     },function(){ 
      $('.project-container').slideDown(); 
     }); 
    e.preventDefault(); 
});