mirror of
https://github.com/desandro/imagesloaded.git
synced 2026-01-14 17:07:55 -05:00
250 lines
7.0 KiB
HTML
250 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery imagesLoaded</title>
|
|
|
|
<style media="screen">
|
|
body { margin: 0; padding: 0 1em 1em 1em; font-family: sans-serif; }
|
|
|
|
#basic-holder { position: relative; height: 1400px; }
|
|
|
|
#basic-holder .column {
|
|
position: absolute;
|
|
border: 2px solid;
|
|
width: 122px;
|
|
}
|
|
|
|
#basic-holder .column img {
|
|
width: 120px;
|
|
position: absolute;
|
|
left: 1px;
|
|
}
|
|
|
|
#holder { margin: 1em 0; padding: 0; list-style: none; }
|
|
#holder li { float: left; margin: 0.5em 1em 0.5em 0; padding: 1em; height: 100px; border: 1px solid #ccc; background: #eee; border-radius: 3px; }
|
|
#holder li.proper { border-color: green; background: #9D9; }
|
|
#holder li.broken { border-color: black; background: #D11; }
|
|
#holder li img { height: 100px; background: #222; }
|
|
|
|
#message span { color: #ccc; margin: 0 10px; }
|
|
|
|
hr { height: 2px; color: #ccc; background: #ccc; border: 0; }
|
|
|
|
.proper { color: green; }
|
|
.broken { background: red; color: white; padding: 2px; }
|
|
|
|
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
|
.clearfix:after { clear: both; }
|
|
.clearfix { *zoom: 1; }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>jQuery imagesLoaded</h1>
|
|
|
|
<p><a href="https://github.com/desandro/imagesloaded">github.com/desandro/imagesloaded</a></p>
|
|
|
|
<h2 id="basic">Basic</h2>
|
|
|
|
<p>Images should be stacked vertically, with 1 pixel space between each.</p>
|
|
|
|
<p>
|
|
<button id="basic-clone">Clone & append more images</button>
|
|
<button id="basic-all-done">How many images are loaded?</button>
|
|
</p>
|
|
|
|
<div id="basic-holder">
|
|
|
|
<div class="column">
|
|
<img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
|
|
<img src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" />
|
|
<img src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" />
|
|
<img src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" />
|
|
<img src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" />
|
|
<img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" alt="Gavin" />
|
|
<img src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg" alt="Anita" />
|
|
<img src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" alt="Take My Portrait" />
|
|
<img src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg" alt="Wonder" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h2 id="deferred">Deferred</h2>
|
|
|
|
<p><code>imagesLoaded()</code> returns a <a href="http://api.jquery.com/category/deferred-object/">jQuery Deferred object</a></code>. This is useful for determining if there are any broken images in the collection.</p>
|
|
|
|
<p>After adding an image, broken images should be marked as <span class="broken">Red</span>, and properly loaded images as <span class="proper">Green</span>.</p>
|
|
|
|
<p id="controls">
|
|
<button data-action="addProper">Add proper image</button>
|
|
<button data-action="addBroken">Add broken image</button>
|
|
<button data-action="removeLast">Remove last image</button>
|
|
<button data-action="removeLast5">Remove last 5 images</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<ul id="holder" class="clearfix"></ul>
|
|
|
|
<hr>
|
|
|
|
<div id="message">Loading...</div>
|
|
|
|
<script src="http://code.jquery.com/jquery.min.js"></script>
|
|
<script src="jquery.imagesloaded.js"></script>
|
|
<script>
|
|
$(function(){
|
|
|
|
// -------------------------- Basic example -------------------------- //
|
|
|
|
var $basicHolder = $('#basic-holder'),
|
|
$col = $basicHolder.children().eq(0),
|
|
basicContainerCount = 1;
|
|
|
|
function positionImages( $container, $images ) {
|
|
var y = 0;
|
|
$images.each( function() {
|
|
var $this = $(this).css({ top: y });
|
|
y += $this.height() + 1;
|
|
});
|
|
$container.height(y);
|
|
}
|
|
|
|
$col.imagesLoaded( function( $images ) {
|
|
positionImages( this, $images );
|
|
});
|
|
|
|
$('#basic-clone').click(function(){
|
|
$col.clone().appendTo( $basicHolder )
|
|
.css({ left: basicContainerCount * 130 })
|
|
.imagesLoaded( function( $images ) {
|
|
positionImages( this, $images );
|
|
});
|
|
basicContainerCount++;
|
|
});
|
|
|
|
$('#basic-all-done').click(function(){
|
|
$basicHolder.find('img').imagesLoaded(function( $images ){
|
|
alert( $images.length + ' images have been loaded.' );
|
|
});
|
|
});
|
|
|
|
// -------------------------- Deferred -------------------------- //
|
|
|
|
// Global variables
|
|
var holder = $('#holder'),
|
|
message = $('#message'),
|
|
controls = $('#controls'),
|
|
image_urls = [
|
|
'http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg',
|
|
'http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg',
|
|
'http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg',
|
|
'http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg'
|
|
],
|
|
additional_urls = [
|
|
'http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg',
|
|
'http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg',
|
|
'https://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg',
|
|
'https://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg',
|
|
'https://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg'
|
|
],
|
|
broken_urls = [
|
|
'missing.jpg',
|
|
'absent.png',
|
|
'not-here.gif',
|
|
'https://example.com/foo.jpg',
|
|
'http://example.com/bar.jpg',
|
|
'https://example.com/image.jpg'
|
|
];
|
|
|
|
// Attach images
|
|
function addImages( urls, random ){
|
|
|
|
var output = '';
|
|
if( random ){
|
|
output = '<li><img src="'+urls[ Math.floor( Math.random() * urls.length ) ]+'" alt="Image"></li>';
|
|
} else {
|
|
for( var i = 0; i < urls.length; i++ ){
|
|
output += '<li><img src="'+urls[i]+'" alt="Image"></li>';
|
|
}
|
|
}
|
|
holder.append(output);
|
|
|
|
checkImages();
|
|
|
|
}
|
|
|
|
// Loaded images check
|
|
function checkImages(){
|
|
|
|
holder.children().removeClass();
|
|
message.empty();
|
|
|
|
var dfd = $("#holder").imagesLoaded(function( $images, $proper, $broken ){
|
|
|
|
$proper.parent().addClass('proper');
|
|
$broken.parent().addClass('broken');
|
|
|
|
var msg = 'Total images: <strong>'+$images.length+'</strong> <span>|</span> ';
|
|
msg += 'Proper images: <strong class="proper">' + $proper.length + '</strong> <span>|</span> ';
|
|
msg += 'Broken images: <strong class="broken">' + $broken.length + '</strong>';
|
|
|
|
message.append('<p>'+msg+'</p>');
|
|
|
|
});
|
|
|
|
dfd.progress(function( total, loaded ){
|
|
var progress = '';
|
|
for( var i = 1; i <= total; i++ ){
|
|
progress += i <= loaded ? '■' : '□';
|
|
}
|
|
total == loaded ? message.empty() : message.html('<p><code>Progress: [' + progress + ']</code></p>');
|
|
}).always(function(){
|
|
message.append('<p>Deferred is: <strong>' + dfd.state() + '</strong></p>');
|
|
});
|
|
|
|
}
|
|
|
|
// Controls
|
|
controls.find('[data-action]').click(function(){
|
|
|
|
var el = $(this),
|
|
action = el.data('action');
|
|
|
|
switch( action ){
|
|
|
|
case 'addProper':
|
|
addImages( additional_urls, 1 );
|
|
break;
|
|
|
|
case 'addBroken':
|
|
addImages( broken_urls, 1 );
|
|
break;
|
|
|
|
case 'removeLast':
|
|
holder.children().slice(-1).remove();
|
|
checkImages();
|
|
break;
|
|
|
|
case 'removeLast5':
|
|
holder.children().slice(-5).remove();
|
|
checkImages();
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Trigger first check
|
|
addImages( image_urls );
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|