加载 div 的背景图像后启动 css 动画。

Question

我想确保在开始之前加载文本动画将发生的背景图像。它不一定要检查是否加载了该页面上的所有背景图像或图像，只需加载特定的一个，因此动画不会发生在 body 的背景上。

图像通过视差脚本加载数据属性。

我试图在加载函数中添加图像，但它似乎根本没有加载。

所有这些都在准备好的文档中。

HTML：

<div id="myDiv" class="parallax-window" data-parallax="scroll" data-image-src="http://s27.postimg.org/ya4yhbmzn/image_Example1.jpg">

    <h1>First Title</h1>
    <h2>Second Title</h2>    

</div>

CSS：

#myDiv{
    width: 100%;
    padding: 80px 0;
    text-align: center;
}

h1, h2{
     opacity: 0; 
}

JAVASCRIPT 不工作：

$(window).load(function(){
    $('#myDiv').attr('data-image-src', 'http://s27.postimg.org/ya4yhbmzn/image_Example1.jpg').load(function() {

    $('h1').css('opacity',1).addClass('slideInDown').css('opacity',1);

    setTimeout(function() {$('h2').addClass('slideInUp').css('opacity',1);}, 1000);

    });
});

JAVASCRIPT 可以工作（但有时图像加载延迟和动画发生）：

$(window).load(function(){

    $('h1').css('opacity',1).addClass('slideInDown').css('opacity',1);

    setTimeout(function() {$('h2').addClass('slideInUp').css('opacity',1);}, 1000);

});

fiddle 显示工作示例和我尝试用于检查背景图像是否已加载的代码。

感谢您提供的任何帮助。

Answer 1

您可以使用 Javascript Image 对象来加载图像，然后将其附加到 dom。例如：

var imgObj = new Image(); 
imgObj.src = "http://s27.postimg.org/ya4yhbmzn/image_Example1.jpg";

imgObj.onload = function() {
   $('#myDiv').attr('data-image-src', this.src); 
   //Here you can initiate your animation
}