jQuery(document).ready(function(){ 在 Fadein 之前没有等待背景图像首先加载

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

任何解决方案都值得赞赏！

谢谢，Danielle

我刚刚让网站上线（它正在建设中，ha）-你会在加载时看到背景图像：http://www.aliceandowl.com谢谢大家

到目前为止，所有给出的答案都是一样的，问题仍然是淡入淡出没有等待背景图像首先加载

Answer 1

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

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

当load事件和所有子元素具有已完全加载。此事件可以发送到任何元素与URL关联：图像、脚本、帧、iframe和窗口对象。

Answer 2

尝试使用此而不是$(document).ready():

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

Answer 3

已解决！我休息了一下，然后又回来了，这通常会有所帮助，我发现了以下内容，现在效果很好，谢谢大家的帮助！

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 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 + ')');

评论

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