jQuery(document).ready(function(){ 不等待背景图像在淡入淡出之前先加载

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 和 window 对象。