How to remove div when iframe fully loaded with jQuery

Question

Is there any way to wait until an iframe has fully loaded before removing a div?

I'm using the following:

  $("#myButton").click(function(event){
        $('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait - Loading!");
        $("#myIFrame").attr('src', $('#url').val());
  });

I'd like to remove the loading gif once the iFrame fully loads.

Any ideas?!

Thanks!!!

Answer 1

You can simply use the load event on your iframe:

 $("#myButton").click(function(event){
        $('#response').html("<span id='loader'><img src='images/ajax-loader.gif' border=0> Please Wait - Loading!</span>");
        $("#myIFrame").attr('src', $('#url').val());
  });

  $('#myIFrame').load(function(){
    $("#loader").remove();
  });