【问题标题】:jQuery: How do I load a display a loading graphic before a large background image, set in css, loads then have the background image fade in?jQuery:如何在大型背景图像之前加载显示加载图形,在 css 中设置,加载然后背景图像淡入?
【发布时间】:2011-05-29 13:55:57
【问题描述】:

我正在重新设计我的个人网站,并使用全尺寸图片作为网站背景。加载时间比网页的其余部分要长得多,而且我不能再减小文件大小了,所以...
使用 jQuery,我想在背景中显示一个动画加载 gif,直到图像加载然后淡入图像。
我有以下 jQuery 代码,可以很好地淡入图像;

$(document).ready(function(){ 
   $('#bodybg').fadeIn(2000);
});

我想考虑在 css id 中添加一个类,然后将加载图像分配给该类,并在图像加载后让 jQuery 剥离该类。类似:

$('#bodybg') .removeClass('loading')

但我有点坚持把它完全放在一个有效的格式上?有人可以帮忙吗?

【问题讨论】:

    标签: jquery image background load fade


    【解决方案1】:

    你可以尝试给fadeIn添加一个回调函数。

    $("#bodybg").fadeIn(2000, function(){
      $("#bodybg").removeClass('loading');
    }) 
    

    【讨论】:

      【解决方案2】:
      $(window).load(function() {
          jQuery('#bodybg').fadeIn();
      });
      

      或者您可以加载一个白屏并淡入网站:

      css:

      div#loading { position: absolute; top:0px ; bottom: 0px; left: 0px; right: 0px; background-color: white; z-index: 1000;}
      

      和 Jquery

      $(window).load(function() {
          jQuery('#loading').fadeOut();
      });
      

      和 html(紧跟在 body 标签之后)

      <div id="loading"></div>
      

      【讨论】:

        【解决方案3】:

        好的,谢谢你们。你的两个输入都有帮助。我设法让加载器 gif 显示然后淡出,并且图像在加载后淡入。我现在有一个很好的效果,向用户表明页面正在加载并且很好地淡出。

        HTML 是...

        <div class=loading style="display:none;"></div>
        

        放在body标签之后...

        <div class="bodybg"></div>
        

        紧随其后。

        jQuery 是...

        $(document).ready(function(){
            jQuery('#loading').fadeOut(8000);});
        $(document).ready(function(){   
            jQuery('#bodybg').fadeIn(3000)});
        

        我让页面的主要内容以 3000 的速度立即淡入,所以这一切真的很好。

        设置的 css 是...

        #bodybg { width: 100%; height: 100%; background: url(../images/body/mainbg.jpg) no-repeat fixed center 0 transparent; position: absolute; z-index: 0; }
        
        #loading { width: 100%; height: 100%; background: url(../images/body/ajax-loader.gif) no-repeat fixed center 100px; position: absolute; z-index:-1;}
        

        当网页首次加载到浏览器中时,背景为白色,网站的徽标和内容立即可见。在主要内容上方,加载器 gif 保持动画状态,直到背景图像最终加载并覆盖它,同时它在背景后面不到一秒后淡出。

        由于在用户浏览器下载后不需要加载背景图像,因此导航到其他页面看起来很流畅,因为加载器 gif 显示并随着其余内容的淡入而淡出。

        非常感谢您的帮助和指导。

        安迪·斯米夫

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2012-10-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-06-21
          • 2014-02-17
          相关资源
          最近更新 更多