Question

我在页面加载时出现了加载图像，但是如何在创建和加载动态元素时显示加载图像？

例如Frame按钮，用于创建新的Iframe元素。

感谢。

$(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>

动态iframe +加载图片

0 个答案: