Запуск 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 и с удовольствием использую это для решения проблемы. Кажется, такая простая вещь, но я не могу понять, как ее решить. is

Как только я выясню это, я также намерен создать анимацию «загрузка» gif.

Answer 1

Попробуйте это:

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); 
}); 

Answer 2

Используйте .load на самом изображении.

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

Здесь http://jsfiddle.net/UA94f/