Jquery ajax, wait until images or iframe are fully loaded before firing function

Question

I am working on putting together an online portfolio. When a user clicks on a certain project, I am trying to load the project information using ajax and insert it into the current page. The issue I'm having is that the function that runs on load() success doesn't know when the content is fully loaded so jquery attempts to run the animation that unhides the div before everything is loaded. The page I am loading has one of two types of content (or both). It either has images or and iframe for a Vimeo embed.

Here is my code:

//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();
});

This is an example of the content ajax would be loading (this project includes one vimeo slide and two images).

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

Currently, everything gets loaded properly, but the slideDown() animation runs, before the content is fully loaded and causes a jump.

Answer 1

You can use the callback function like this

//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();
});