Question

我想确保文本动画发生位置的背景图像在启动之前加载。它不一定要检查该页面上的所有背景图像或图像是否都被加载，只有这个特定的一个，所以动画不会发生在身体的背景上。

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

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

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

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
}

一旦加载div的背景图像，启动css动画。

1 个答案: