Разделы
Теги | RSS © 2008 – 2022
Контакты
email:
skype:
Вернуться
» » » Загрузка изображений на jQuery

Загрузка изображений на jQuery


Загрузка изображений на jQuery

$(function () {
//@ my flicker link
var flickr_set = 'http://www.flickr.com/photos/87187920@N00/';
//@ id of div where the loading informations visible
var _loadDivId = 'loadnote';
//@ id of the ul container
var _imgContainerId = 'container';
//@ style of li loading (spinner image)
var _imageLoadClassName = 'loading';
//@ grab the images
var images = $('ul#'+_imgContainerId+' li img');
//@ image length
var max = images.length;
//@ remove them from DOM to prevent normal load
$('ul#'+_imgContainerId+' li').remove();
//@ loading div object
var loadDiv = null;
//@ start loading
if(max>0){
loadDiv = $('<div id="'+_loadDivId+'" style="display:none"></div>').appendTo($('body'));
LoadImage(0,max);
}
//@ Loading Function Handler
function LoadImage(index,max)
{
if(index<max)
{
// loading div update
$('#'+_loadDivId).html("Loading "+(index+1)+" of "+max).fadeIn("fast");
// add list to ul
var list = $('<li id="_img'+index+'"></li>').attr('class',_imageLoadClassName).appendTo('ul#'+_imgContainerId);
// new image object
var img = new Image();
// current image
var curr = $("li#_img"+index);
// load current image
$(img).load(function ()
{
//@ hide it first + .hide() failed in safari
$(this).css('display','none');
//@ remove loading class from li and insert the image into it
$(curr).removeClass(_imageLoadClassName).append(this);
//@ optional wrap with link
$(this).wrap('<a href="'+flickr_set+'"></a>');
//@ fade it in
$(this).fadeIn('slow',function()
{
if(index == (max-1))
{
//@ remove loading div after all images loaded
$(loadDiv).remove();
}
else
{
//@ we are inform loading next item
$(loadDiv).html('Wait Loading Next Item ...');
//@ delay 2 secons and load next item *uses jquery timer plugin*
$(this).oneTime("2s", function() { LoadImage(index+1,max); });
}
});
}).error(function () {
//@ if loading error remove li
$(curr).remove();
//@ try to load next item
LoadImage(index+1,max);
}).attr('src', $(images[index]).attr('src'));
}
}
});
На правах рекламы: розетки выключатели abb . onetto . Профессиональная программа для риэлторов.
Оставить комментарий
Вверх