jQuery - Show loading message while using replaceWith

Question

I'm trying to load a PPT in a div while using replaceWith with google docs like this:

$("#u1").click(function() {
  $(".cuerpo").replaceWith('<div class="cuerpo">' + '<iframe src="http://docs.google.com/gview?url=http://**************.pptx&embedded=true" style="width:600px; height:500px;" frameborder="0"> </iframe>' + "</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The problem is that it take a few seconds to load completely and I need to display some message that the div is loading, is there anyway to do it?

Answer 1

Use jQuery loaded callback method like this:

$('iframe').load(function(){
   // Iframe has been loaded...Do whatever you want.

});

Answer 2

Someone has already answered to a question similar to this, checkout How can I create a "Please Wait, Loading..." animation using jQuery?, this will probably help you with what you need.

Answer 3

You can add new hidden div, for example:

<div id="loadingDiv" style="display: none; position: fixed; width: 100%; height: 100%; background-color: black; opacity: 0.8><img src="[image here if you want one]></div>

Then before

$( ".cuerpo" ).replaceWith( '<div class="cuerpo">' + '<iframe src="http://docs.google.com/gview?url=http://**************.pptx&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>' + "</div>" );});

add an additional line, like: $('#loadingDiv').css("display","inherit");

Don't forget to hide it again after content is loaded.

... That's at least one way to do it.