Question

我有一个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>

我们将非常感谢您的帮助

Answer 1

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

我已删除您代码的<img>，此操作无效。我通过在div#printdiv中添加一个名为load-gif的类来简化它，并为其赋予了background样式。

我还添加了不透明度功能。否则，当gif仍在后台时，您会看到一个页面正在iframe中加载。为避免这种情况，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>

另一种方法是在加载load-gif之后完全删除iframe类。 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
  });
});

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

1 个答案: