imagesLoaded jQuery

imagesLoaded jquery插件，图片加载完毕执行内容

http://imagesloaded.desandro.com/

( function( window ) {

'use strict';

var $progress, $status;
var supportsProgress;
var loadedImageCount, imageCount;

$( function() {
var $demo = $('#demo');
var $container = $demo.find('#image-container');
$status = $demo.find('#status');
$progress = $demo.find('progress');

supportsProgress = $progress[0] &&
// IE does not support progress
$progress[0].toString().indexOf('Unknown') === -1;

$('#add').click( function() {
// add new images
var items = getItems();
console.log( items );
$container.prepend( $(items) );
// use ImagesLoaded
$container.imagesLoaded()
.progress( onProgress )
.always( onAlways );
// reset progress counter
imageCount = $container.find('img').length;
resetProgress();
updateProgress( 0 );
});

// reset container
$('#reset').click( function() {
$container.empty();
});
});

// ----- ----- //

// return doc fragment with
function getItems() {
var items = '';
for ( var i = 0; i < 7; i++ ) {
items += getImageItem();
}
return items;
}

// return an <li> with a <img> in it
function getImageItem() {
var item = '<li class="is-loading">';
item.className = 'is-loading';
var size = Math.random() * 3 + 1;
var width = Math.random() * 110 + 100;
width = Math.round( width * size );
var height = Math.round( 140 * size );
var rando = Math.ceil( Math.random() * 1000 );
// 10% chance of broken image src
// random parameter to prevent cached images
var src = rando < 100 ? '//foo/broken-' + rando + '.jpg' :
// use lorempixel for great random images
'//lorempixel.com/' + width + '/' + height + '/' + '?' + rando;
item += '<img src="' + src + '" /></li>';
return item;
}

// ----- ----- //

function resetProgress() {
$status.css({ opacity: 1 });
loadedImageCount = 0;
if ( supportsProgress ) {
$progress.attr( 'max', imageCount );
}
}

function updateProgress( value ) {
if ( supportsProgress ) {
$progress.attr( 'value', value );
} else {
// if you don't support progress elem
$status.text( value + ' / ' + imageCount );
}
}

// triggered after each item is loaded
function onProgress( imgLoad, image ) {
// change class if the image is loaded or broken
var $item = $( image.img ).parent();
$item.removeClass('is-loading');
if ( !image.isLoaded ) {
$item.addClass('is-broken');
}
// update progress element
loadedImageCount++;
updateProgress( loadedImageCount );
}

// hide status when done
function onAlways() {
$status.css({ opacity: 0 });
}

})( window );

效果演示：

http://codepen.io/kujian/full/aDeby/

您可能感兴趣的文章：
基于 Jquery Masonry + imagesLoaded 插件实现瀑布流布局
imagesLoaded jQuery
jQuery分页插件 jQuery Pagination
jQuery右键菜单插件 jQuery ContextMenu
Horizontal Scroll Menu with jQuery
jQuery iPhone UI
jQuery iPhone Plugin
jQuery Gird
jQuery向导插件 Jquery Wizard Plugin
jQuery++