javascript - Dynamic Iframe + Loading Image -


i have loading image appears while page loads, how can show loading image when dynamic elements created , loaded?

such frame button creates new iframe element.

thanks.

$(window).load(function () {    $(".loader").fadeout("slow");  });    function createframe() {    var frame = document.createelement("iframe");    frame.id = "frame2";    frame.src = "http://geektyrant.com/";    frame.height = "400px";    frame.width = "400px";    document.getelementbyid("content").appendchild(frame);  }
.loader{    position: fixed;    left: 0px;    top: 0px;    width: 100%;    height: 100%;    z-index: 9999;    background-image:  url("http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif");    background-color: black;    background-repeat: no-repeat;    background-position: center;    background-size: auto;  }
<html>    <head>      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>            </head>    <body>            <div class="loader"></div>            <button id="button" onclick="createframe()">frame</button>            <div id="content">        <iframe id="frame1" height="400" width="400" src="http://geektyrant.com/"></iframe>      </div>          </body>  </html>


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -