Добрый день, хочу сделать небольшой статический сайт без перезаргузи основной страницы при переходе по ссылкам. Просто заргужая страны в div блок, пытаюсь все это реализовать через jquery
$(document).ready(function() {
$('li a').click(function(){
var toLoad = $(this).attr('href');
$('.load-in').fadeOut('fast', loadContent);
$('.loader').show();
function loadContent() {
$('.load-in').css({ opacity : 0.3 }).load( toLoad , hideLoad );
};
function hideLoad () {
$('.load-in').fadeIn('fast' ,
function () { //прячем лоадер и opacity 1
$('.loader').fadeOut('fast');
$('.load-in').animate({ opacity : 1 }); }
);
};
return false;
});
});
css
*{padding:0;margin:0;}
.ab {width:60px;height:60px;background:red;}
.wrap {width:900px;margin:0 auto;position:relative;}
.load-in {}
.loader {
height:60px;
width:60px;
left:50%;
margin-left:-30px;
position:fixed;
top:30%;
display:none;
z-index:1000;
background:url('images/preloader.gif') center no-repeat red;
}
разметка
<div class="loader"></div>
<div class="wrap">
<ul>
<li class="ab"><a href="load.html">load me</a></span>
<li class="ab"><a href="loader.html">load here</a></span></li>
</ul>
<div class="load-in">
</div>
</div>
Но почему-то callback в этой сторчке
$('.load-in').css({ opacity : 0.3 }).load( toLoad , hideLoad );
Срабатывает до того как загружаются картинки в загружамой странице. Нужно что бы opacity и preloader убирались после того как контент и картинки полность загружены. Не особо разбираюсь в jquery, так что если вопрос нубский заранее извиняюсь!
Спасибо!