问在动态加载div内容之前添加图片jquery
EN

Stack Overflow用户

提问于 2019-03-15 19:43:26

回答 1查看 54关注 0票数 0

我有一个iframe，我将在其中显示文本文件中的内容。它会不断地检查文件夹中是否有该文本文件。直到文本文件不在那里，我希望它显示一个gif或图像，内容到达后，它将显示内容，gif将被隐藏。如何使用jquery和HTML实现这一点？我写的代码如下：

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    setInterval(my_function,5000); 
    function my_function(){
      console.log("reloading...");
      $('#printdiv').load(location.href);
    }
  </script>
</head>
<body>
 <div>
  <div id="printdiv">
    <p><iframe id = "frame1" src="test.txt" frameborder="0" width="95%">
 <img id = "imgProg" alt = "Progress" src = "ajax-loader.gif" visible = 
"false"/>
</div>
</iframe></p>
  </div>  
</body>
</html>

我们将非常感谢您的帮助

jquery

html

css

javascript

回答 1

Stack Overflow用户

发布于 2019-03-16 15:58:04

我在下面做的是一个等待加载的iframe的简化方法，同时在后台显示了一个gif。当iframe完全加载时，gif将消失。请注意，这是特定于jQuery的。

我已经删除了你的代码的<img>，这将不起作用。我通过向div#printdiv添加一个名为load-gif的类来简化它，并为它提供了background样式。

我还添加了一个不透明函数。否则，您会看到一个页面被加载到iframe中，而gif仍然在后台。为了避免这种情况，iframe在完全加载之前是不可见的(opacity: 0;)，然后不透明度会变成opacity: 1;。

body {
  height: 40vw;
  width: 100%;
  background-color: #e4e4e4;
}

#printdiv {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e4;
  height: 100%;
  margin: 3em;
}

#printdiv>p,
body>div,
#frame1 {
  width: 100%;
  height: 100%;
}

#printdiv,
#frame1 {
  background-color: white;
}


/* Below CSS are the important factors, above is just example styling. */

#frame1 {
  opacity: 0; /* set at 0 to avoid gif and iframe mixture in the same div */
}

.load-gif { /* extra class to load gif */
  background: url(https://loading.io/assets/img/ajax.gif) center no-repeat;
  background-size: contain;
}

<!-- begin snippet: js hide: false console: true babel: false -->
<html>

<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    jQuery(document).ready(function() { // starts DOM page is ready
      jQuery("#frame1").on("load", function() { // when iframe is completely loaded
        jQuery(".load-gif").css("background", "unset"); // removes gif
        jQuery(this).css("opacity", "1"); // set opacity to normal value
      });
    });
  </script>
</head>

<body>
  <div>
    <div id="printdiv" class="load-gif">
      <p>
        <iframe id="frame1" src="/" frameborder="0"></iframe>
      </p>
    </div>
  </div>
</body>

</html>

另一种方法是在加载iframe后完全删除load-gif类。jQuery将如下所示：

jQuery(document).ready(function() { // starts DOM page is ready
  jQuery("#frame1").on("load", function() { // when iframe is completely loaded
    jQuery('#printdiv').removeClass("load-gif"); // removes gif class
    jQuery(this).css("opacity", "1"); // set opacity to normal value
  });
});