jQuery(document).ready(function(){ 不等待背景图像在 Fadein 之前先加载答案

【问题标题】：jQuery(document).ready(function(){ isn't waiting for Background Image to load first before FadeinjQuery(document).ready(function(){ 不等待背景图像在 Fadein 之前先加载
【发布时间】：2015-03-28 15:59:55
【问题描述】：

我在使用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 不等待背景图像首先加载。

【问题讨论】：

你试过$('.background-image').load() { });吗？
运气不好 @D4V1D 但谢谢！

标签： jquery css wordpress background-image fadein

【解决方案1】：

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

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

load 事件被发送到一个元素，当它和所有子元素都有已完全加载。此事件可以发送到任何元素与 URL 相关联：图像、脚本、框架、iframe 和窗口对象。

【讨论】：

【解决方案2】：

试着用这个代替$(document).ready():

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

【讨论】：

页面还能成功运行吗？
是的，它的运行方式与以前完全相同 - 我确定我一定是在某个地方出错了，只是无法弄清楚！谢谢扎克

【解决方案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);
    });
  });

现在我要喝最大杯的酒；）

【讨论】：

【解决方案4】：

您需要使用：.load();

这会等到所有图像，闪存...加载：$(document).load(function(){});

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

【讨论】：

【解决方案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;

【讨论】：