<script>
var $line = $('.headline .preloader'),
$images =$('#images');
$(document).ready(function(){
$.imageloader({
urls: ['images/0.jpg', 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg', 'images/9.jpg', 'images/10.jpg', 'images/11.jpg', 'images/12.jpg', 'images/13.jpg', 'images/14.jpg'],
smoothing: true,
onComplete: function(){
$('#complete-icon').animate({opacity:1}, 600);
},
onUpdate: function(ratio, image){
$line.css('width', (ratio * 100) + '%');
if(image){
var index = $('#images li').size();
$images.append('<li id="' + index + '"><img src="' + image + '"/></li>');
$('#images li:eq(' + index + ')').delay(index * 50).animate({opacity: 1}, 1000);
}
},
onError: function(err){
console.log(err);
}
});
$.imageloader({
urls: ['images/15.jpg', 'images/16.jpg', 'images/17.jpg', 'images/18.jpg', 'images/19.jpg', 'images/20.jpg', 'images/21.jpg', 'images/22.jpg', 'images/23.jpg', 'images/24.jpg', 'images/25.jpg', 'images/26.jpg', 'images/27.jpg'],
smoothing: true,
onComplete: function(){
$('#complete-icon').animate({opacity:1}, 600);
},
onUpdate: function(ratio, image){
$line.css('width', (ratio * 100) + '%');
if(image){
var index = $('#images li').size();
$images.append('<li id="' + index + '"><img src="' + image + '"/></li>');
$('#images li:eq(' + index + ')').delay(index * 50).animate({opacity: 1}, 1000);
}
},
onError: function(err){
console.log(err);
}
});
});
</script>