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
Post a Comment