0

我正在创建一个功能，其中用户按下按钮（打印时间表），然后出现一个弹出窗口，其中显示他们的时间表的页面，然后自动出现打印选项。但是，当弹出窗口仍在加载时间表时，我想显示一个动画 GIF。弹出窗口中的时间表不是用 AJAX 获取的，所以我不能使用 ajax 启动和停止，那么我该怎么做呢？

<input type="button" value="Print Timetable" class="printButton" onclick="window.open(url, ' _parent','height=550, width=800');"/>

这是时间表弹出窗口中目前正在发生的事情：

<div id="animated-logo" class="animated-logo">
    <a href="/" title="Print your timetable">Test</a>
</div>

<script  type="text/javascript">
        $('.animated-logo').addClass('logo');
        $('.animated-logo').removeClass('animated-logo');
    if (window.print){ self.print();}

</script>

显然，那个动画 gif 不会起作用，但它是一个开始。

任何帮助都会很棒。谢谢！

4

1 回答 1

2

load()在这里查看 jQuery 。

HTML 

 <div id="" class="itm-animated-logo">
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().removeClass("itm-animated-logo");
}

CSS

.itm-animated-logo {background-image: loading.gif;}

因此，当加载弹出窗口（使用 class itm-animated-logo）时，它的背景将是loading.gif文件。加载时间表后 ( #time-table)，弹出窗口的类将被删除，背景也将随之删除。

这样做的缺点可能是时间表的某些部分将被加载（因此时间表以块的形式加载）在这种情况下，它们将位于背景图像的“顶部”。要解决此问题，您可以制作一个额外的 div。也许这个解决方案更好：

HTML 

 <div id="" class="itm-animated-logo">
        <div id="loading"><img src="loading.gif" alt="Loading your time table" height="32" width="32" /></div>
        <a href="/" title="Print your timetable">Test</a>
        <div id="time-table">...</div>
    </div>

jQuery

$("#time-table").load(function() {
  $(this).parent().children("#loading").fadeOut("slow");
}

CSS

#loading {
   display: block;
   width: 32px;
   height: 32px;
   margin: 50px auto;
   padding: 0;
}
于 2012-05-22T11:18:33.737 回答