Javascript 背景图像显示

我的联系人部分有一个简单的图像显示问题。当你在第一次加载时转到该部分，背景图像不会显示，当我加载它时，它会显示，但不是我想要的。我希望它像这个演示网站一样：这是我的完整网站：

这是我的Css：

    #contact {
height: 1050px;
margin: auto;
padding: 0;
width: 100%;
padding-top: 10%;
background: url(../images/train.jpg)no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我的Html：

    <section id="contact">      
      <aside><h3><span>Vous voulez nous proposer un film loupé&thinsp;?
      N'hésitez pas à nous contacter&thinsp;: </span>
      <a href="mailto:lefestivaldufilmloupe@gmail.com">lefestivaldufilmloupe@gmail.com</a>
      </h3></aside> 
    </section>

我错过了什么

我尝试了这两种方法来预加载我的图像，但效果仍然不好。 第一个：图像在Firefox/Chrome上显示，但不是全屏显示

     <script>
// better image preloading @ http://perishablepress.com
    function preloader() {
    if (document.getElementById) {
    document.getElementById("contact").style.background = "url(images/train.jpg)                 no-repeat center center";}
    }
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
        oldonload();
        }
        func();
    }
    }
    }
    addLoadEvent(preloader);
    </script>

//更好的图像预加载@http://perishablepress.com
函数预加载程序（）{
if（document.getElementById）{
document.getElementById（“contact”）.style.background=“url（images/train.jpg）无重复中心”；}
}
函数addLoadEvent（func）{
var oldonload=window.onload；
if（typeof window.onload！=“函数”）{
window.onload=func；
}否则{
window.onload=函数（）{
if（oldonload）{
oldonload（）；
}
func（）；
}
}
}
addLoadEvent（预加载程序）；

以下是完整代码：

秒：在firefox上非常完美，不在chrome上显示，部分在safari上显示

    <script>
    $(document).ready(function(){

    $("#contact").hide(); //on cache le contenu

    $("body").append('<div id="wait"><img src="../lefestivaldufilmloupe/images/loading.gif" alt="chargement..."/></div>')
    });
    $(window).load(function(){

    $("#wait").hide();

    $("#contact").fadeIn();

    });
    </script>

$（文档）.ready（函数（）{
$（“#contact”）.hide（）；//在缓存上
$（“正文”）。附加（“”）
});
$（窗口）。加载（函数（）{
$（“#等待”）.hide（）；
$（“#联系人”）.fadeIn（）；
});

以下是完整代码：

问题来自我的类型动画。如果没有Textillate.js和所有依赖项，它工作得很好。 我这样修复它：首先，我在jquery.sticky中添加我的联系人部分：

    <script>
    $(document).ready(function(){
    $("#header").sticky({topSpacing:10});
    $("#lignejaune").sticky({topSpacing:0});
    $("#contact").sticky({topSpacing:1050});
     });
    </script>

$（文档）.ready（函数（）{
$（“#头”）.sticky（{topspace:10}）；
$（“#lignejaune”）.sticky（{topspace:0}）；
$（“#联系人”）.sticky（{topSpacing:1050}）；
});

然后我加上一个z指数：-1；在我的#联系css。图像在Chrome/Safari中正确显示，无论是否预加载，都不会有太大变化

---

编辑：更正html，预加载图像，修复。

问题的一部分可能是损坏的html。有效的html在范围内不能有“br”标记。请尝试以下html：

<section id="contact">
    <aside><h3><span>Vous voulez nous proposer un film loupé&thinsp;?
            N'hésitez pas à nous contacter&thinsp;: </span>
           <a href="mailto:lefestivaldufilmloupe@gmail.com">lefestivaldufilmloupe@gmail.com</a>
        </h3></aside> 
</section>

---

我在正确显示或不正确显示图像时出现了不一致的行为，但修复此问题将消除它作为问题的一个因素，以便更容易确定问题的真正原因。

谢谢，它现在在Firefox中工作得非常好。我在W3C中检查了我的html，没有更多的错误。它在Chrome/Safari中仍然显示不好，我不知道如何解决这个问题。图像相当大。我注意到，在Chrome中，它部分地出现，然后在resize窗口中，它完全出现。你试过预加载吗？是的，我试过两种预加载的方法，它仍然不能正常工作。我编辑了我的问题。请格式化你的代码，尝试阅读未格式化的代码会有伤害，所以我跳过这个问题，看起来很有趣

#contact span {
  display: block;
  margin: 1em 0;
}