我创建了一个用于存储隐藏图像的jQuery对话框,只能通过单击链接来触发。一些代码如下:
<div id="dialogdialog" style="background-color: white;">
<div>
<div style="clear: right">
<a href="#" class="closeDialogButton">
<div id="fitClose" class='sprite x' style="float:right;"></div></a>
</div>
</div>
<div>
<div id="fitLogoBlack" class='sprite black-logo'></div>
<br/><br/>
<img id="fitTitle" src="img/fitguide_title.jpg">
<img id="fitLogoBlue" src="img/blue.png">
</div>
<div>
<img src="img/topbanner01.jpg">
<br/>
<img src="img/slim02.jpg">
</div>
</div>
<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>
<script>
$(function() {
$("#dialogdialog").dialog({
width: 900,
border: 0,
autoOpen: false,
modal: true,
resizeable: false,
dialogClass:"myClass"
});
$("#fitguidePic").on("click", function() {
$("#dialogdialog").dialog("open");
});
});
$('.closeDialogButton').click(function(e){
e.preventDefault();
$('#dialogdialog').dialog('close');
})
</script>
代码正常工作,图片可以隐藏,直到我点击链接,然而,偶尔当我刷新页面时,我会看到隐藏的内容出现在页面上几秒钟,但在整个页面之后满载后,它将再次被隐藏。但是每次刷新都不会发生这种情况。
我不知道这个问题是由什么造成的。刷新时如何阻止图像弹出?谢谢!
答案 0 :(得分:2)
将此添加到您的CSS:
#dialogdialog {
display: none;
}
因为在浏览器中显示页面并不等待Javascript完全加载,所以对话框有时是可见的,因为默认情况下它是可见的。 jQuery稍后会通过将CSS直接附加到元素来“覆盖”这个初始设置。
答案 1 :(得分:1)
刷新时如何阻止图像弹出?
使用vanilla js(raw js)。为什么?
我不知道这个问题是由什么造成的。
这是因为只有在加载整个文档后才加载jQuery(如果设置正确)。因此,当您刷新图像时首先出现,然后隐藏它的代码在此之后加载。任何时候有延迟并且加载速度很慢,如果使用jQuery,你会在隐藏之前看到图片。
Alt解决方案:您可以加载jQuery而无需等待文档完全加载,但您的代码可能会中断,这通常是一个非常糟糕的主意。 jQuery仅适用于整个文档。
答案 2 :(得分:0)
display: none; on #dialogdialog