How to load images loading.gif before load iframe in jquery?

Question

I have a Jquery code:

<script type='text/javascript'>
jQuery(function ($) {
    $('.basic').click(function (e) {
        var loading = '<img src="loading.gif"/>';
            $('<div></div>').load(loading);
        var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
            return false;
    });
});
</script>

How to load a image loading.gif before load a iframe ?

Answer 1

My solution:

jQuery(function ($)
{
    $('.basic').click(function (e)
    {
        $('<img />').bind('bind',function()
        {
            var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
        }).attr('src','loading.gif');
        return false;
    });
});

Answer 2

You can use a callback

<script type='text/javascript'>
jQuery(function ($) {
    $('.basic').click(function (e) {
        var loading = '<img src="loading.gif"/>';

        $('<div></div>').load(loading, function() {
        var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
            return false;
    }); //end of loading the image
  }); //end of loading the iframe
});
</script>