JQuery исчезает в фоновом режиме

Question

У меня есть эта разметка для фонового изображения:

<img src="bg.jpg" id="bg" alt="">

и этот css:

#bg { position: fixed; top: 0; left: 0; }
#bg {display:none;}

и этот jquery:

$(document).ready(function(){
$('#bg').load(function() {
$(this).fadeIn('slow');
});
}); 

В основном это работает, но странная ситуация в том, что иногда изображение загружается, иногда нет, иногда мне приходится обновлять страницу несколько раз. Взгляните здесь , чтобы понять, о чем я говорю.

Answer 1

Дело в том, что изображение загружается до сценария. Таким образом, к тому времени, когда вы связываете обработчик событий для события загрузки изображения, изображение уже загружено, и событие не инициируется.
Вы должны выполнять свою функцию при загрузке окна, а не когда документ готов:

$(window).load(function(){
    $('#bg').load(function() {
       $(this).fadeIn('slow');
    });
}); 

Answer 2

Событие $(document).ready() наступает, когда DOM готов, но ДО гарантированно загружены любые изображения.

Так что вы МОЖЕТЕ быть, что иногда ваше изображение просто не загружаетсякогда происходит событие .ready.

Попробуйте вместо этого использовать событие .load.

Answer 3

Весь смысл .ready () в том, что ваш код будет запущен, как только "иерархия DOM будет полностью построена".Так как вы ждете на изображении, это будет именно то, что вы не хотите.jQuery.load () «не запускается до тех пор, пока все ресурсы, такие как изображения, не будут полностью получены», поэтому перенесите оператор .load из готового документа.