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

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

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

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

所有这些都在一个准备就绪的文档中

HTML:

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（但有时图像加载延迟和动画发生）：

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

---

感谢您提供的帮助。

您可以使用Javascript图像对象加载图像，然后将其附加到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
}

---

等待图像加载可能很棘手。我曾经使用过这个插件，它以前帮助过我，但在我这段代码中似乎不起作用，通过将图像直接放在加载函数中得到了相同的效果。

$(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);

    });
});

$(window).load(function(){

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

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

});

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
}