jquery gif loader并没有淡出

时间:2017-03-14 11:18:33

标签: jquery html css

我在最后写了一个带有一些脚本的网页(这些脚本只管理按钮)。 现在我在body标签下面插入一个新的div:

<div class="loader">LOADING...</div>

这是css:

&#13;
&#13;
.loader {
        display: none;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: #fafafa url(page-loader.gif) no-repeat center center;
        text-align: center;
        color: #999;
    }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   

<script type="text/javascript">
          $( document ).ready(function() {
        		$('.loader').css({'display':'block'});
                console.log( "document loaded" );});
        $( window ).on( "load", function() {
        		$('.loader').fadeOut("slow");
                console.log( "window loaded" );});
        </script>   
   
&#13;
&#13;
&#13;

问题是gif不会淡出,它会保留在页面上并无限加载。我怎么解决? 我尝试使用另一个页面的脚本,它正常工作。谢谢

3 个答案:

答案 0 :(得分:2)

您可以尝试以下方式吗?实际上对于任何加载器都不需要默认隐藏因为要通过jquery显示fadeIn()我们需要等待至少jQuery文件。所以默认情况下最好是可见的。请参阅以下方法,并尝试它是否适合您。

def decorator(class_):

    def has_method(cls, meth):
        # (FIXME:the check bellow does not take in account other applications of this decorator)
        return any(meth in ancestor.__dict__ for ancestor in cls.__mro__[:-1]):

    def has_new(cls):
        return has_method(cls, "__new__")

    def has_init(cls):
        return has_method(cls, "__init__")

    class Wrapper(class_):

        def __new__(cls, *args, **kwargs):
            print("Wrapper.__new__", cls, args, kwargs)
            if  (args or kwargs) and not has_new(cls) and has_init(cls):
                args, kwargs = (), {}
            obj = super().__new__(cls, *args, **kwargs)
            ...
            return obj

        def __init__(self, *args, **kwargs):
            print("Wrapper.__init__", self, args, kwargs)
            functools.update_wrapper(self, class_)
            cls = self.__class__
            if (args or kwargs) and not has_init(cls) and has_new(cls):
                args, kwargs = (), {}
            super().__init__(*args, **kwargs)

    return Wrapper

document.getElementById("testdiv").innerHTML = `<img src='${test1.par2}' alt='${test1.par1}' class='image' />`;

答案 1 :(得分:0)

我在我的应用中做过这种事情,请尝试这个脚本,这可能有帮助

git --sshKey='ssh://git@my-repo.com/my-project.git' push

答案 2 :(得分:0)

此代码应该适合您

<强> HTML

<body>
  <div class="loader">LOADING...</div>
  <!-- OTHER TAGS FROM HERE -->
</body>

<强> CSS

.loader {
  display: block;  /*Should Display*/
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fafafa url(page-loader.gif) no-repeat center center;
  text-align: center;
  color: #999;
}

<强>的jQuery

$(document).ready(function() {
    $('.loader').fadeOut(1000);  /*FadeOut after page loaded*/
    console.log("document loaded!");
});
  

注意:首先display:none;是不对的。它应该是display: block;。加载页面后,隐藏.loader标记。