Question

我遇到jQuery(document).ready(function(){时遇到问题 - 我的问题是，当我清除缓存时，它没有等待首先加载背景图像。所以会发生的事情是，在包装器淡入之前会出现延迟，然后图像在加载时会明显缩小屏幕。

我在Wordpress上使用Headway主题构建。

它让我疯了:)

CSS：

@-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.background-image {
  background: url('http://www.aliceandowl.com/wp-content/uploads/2015/03/Purity-London-Homepage-Banner.jpg') no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  opacity: 0;

  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
}

.background-image.visible {
  opacity: 1;
}

jQuery的：

  jQuery(document).load(function() {
  jQuery('.background-image').on('webkitAnimationEnd', function(e) {
    jQuery(this).addClass('visible');
  });
});

我已经从http://codepen.io/graygilmore/pen/hxpEt

中量身定制了这个

任何解决方案都是无法理解的！

谢谢，丹尼尔

我刚刚建立了网站（它的建设非常糟糕） - 你会在加载时看到背景图片： http://www.aliceandowl.com 谢谢你们！

到目前为止，所有给出的答案都是做同样的事情，问题仍然是Fadein不会等待背景图像首先加载。

Answer 1

$(document).ready没有等待资源加载。它只是确保在 DOM加载之后调用回调。

对于资源，请使用$(window).load，仅在加载js / css / images等外部资源时触发回调函数。

load事件在它和所有子元素都有时发送给元素已完全装满。此事件可以发送到任何元素与URL相关联：图像，脚本，框架，iframe和窗口对象。

Answer 2

解决了！我休息了一下然后回到了通常有帮助的地方，我发现以下现在完美无缺，谢谢你所有的帮助！

CSS：

.background-image {
  background: url('http://www.aliceandowl.com/wp-content/uploads/2015/03/Purity-London-Homepage-Banner.jpg') no-repeat center center fixed; 

    display: none;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

jQuery：

jQuery(window).load(function(){
    jQuery('<img/>').attr('src', 'http://www.aliceandowl.com/wp-content/uploads/2015/03/Purity-London-Homepage-Banner.jpg').load(function() {  
      jQuery('.background-image').fadeIn(2000);
    });
  });

现在我要买一杯最大的酒;）

Answer 3

尝试使用此代替$(document).ready()：

$(window).on('load', function() {
    // Code here
});

Answer 4

您需要使用：.load();

等待所有图像闪烁......加载：$(document).load(function(){});

然而，这永远不会等待您的图像加载，它只等到加载基本HTML之后： $(document).ready(function(){});

Answer 5

修改尝试使用您的所有jQuery(document).load(function() { ...：

进行相关操作
var image = 'http://graygilmore.com/images/bk-body.jpg', img = $('<img />'); img.bind('load', function() { $('.background-image').addClass('visible'); }); img.attr('src', image); $('.background-image').css('background-image', 'url(' + image + ')');

commentout

//background: url('http://graygilmore.com/images/bk-body.jpg') no-repeat center center fixed;

jQuery（document）.ready（function（）{不等待背景图像在Fadein之前加载

5 个答案: