在动态加载div内容之前添加图片jquery
在动态加载div内容之前添加图片jquery
提问于 2019-03-16 03:43:26
我有一个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>
我们将非常感谢您的帮助
回答 1
Stack Overflow用户
发布于 2019-03-16 23: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
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55189697
复制相关文章
相似问题
腾讯云开发者
