加载图像后运行 JS

Question

我有一个带有背景图像的 DIV。图片路径根据 $_GET 数组变化。

<div id="background-img" style="background: url('elements/<?php if (empty($_GET['p'])){ echo 'home'; } else { echo $_GET['p'];} ?>.jpg') no-repeat fixed center center; background-size:cover;"></div>

我希望这个 DIV 的不透明度使用过渡从 0 到 1 变化

$(document).ready(function(){
        $('#background-img').css('opacity', '0');
        $('#background-img').animate({opacity: 1}, 2000);
})

现在这一切都很棒而且花花公子。 但我只希望在加载图像时发生此动画（图像非常大）。我还想运行其他动画，但只有在加载该图像之后。

我试过这样做：

$(document).ready(function(){
        $('.fadein').css('opacity', '0');
        $('#background-img').css('opacity', '0');
        $('#header').css('opacity', '0');
});
$('#background-img').load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});

但它没有用。动画根本不运行。 我正在运行 jquery，并乐于使用它来解决问题。 这似乎是一件很简单的事情，但我似乎不知道如何解决它。 是

一旦我弄清楚了，我还打算让一些“加载”的 gif 动画进出。

Answer 1

在图像本身上使用 .load。

$('#bg').ready(function(){
    $('#bg').css({opacity:"1"});
});

这里http://jsfiddle.net/UA94f/

Answer 2

试试这个：

http://forum.jquery.com/topic/start-jquery-after-image-loads

或者这可能会有所帮助：Fade in images after they have loaded:)

http://jsfiddle.net/hmeev/

代码

$(window).load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});