mirror of
https://github.com/desandro/imagesloaded.git
synced 2026-01-14 17:07:55 -05:00
204 lines
6.0 KiB
HTML
204 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery imagesLoaded</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
</head>
|
|
<body id="top">
|
|
|
|
<div id="header" class="container header">
|
|
|
|
<div id="download">
|
|
<h6>Download Latest</h6>
|
|
<div class="btn-group">
|
|
<a href="//github.com/desandro/imagesloaded/raw/master/jquery.imagesloaded.js" class="btn btn-large">Development</a>
|
|
<a href="//github.com/desandro/imagesloaded/raw/master/jquery.imagesloaded.min.js" class="btn btn-large">Minified</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>imagesLoaded</h1>
|
|
<p>jQuery plugin that triggers a callback after all images have been loaded</p>
|
|
|
|
</div>
|
|
|
|
<div id="nav">
|
|
<div class="container">
|
|
|
|
<ul id="tabs" class="clearfix">
|
|
<li class="active">
|
|
<a href="#simple">Simple example with cloning test</a>
|
|
</li>
|
|
<li>
|
|
<a href="#advanced">Example utilizing the whole plugin functionality</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="sections" class="container">
|
|
|
|
<div id="simple">
|
|
|
|
<div class="controlbar clearfix">
|
|
|
|
<button class="btn btn-black fright" data-action="clone">Clone holder and reposition images</button>
|
|
|
|
<button class="btn btn-black" data-action="run">Run example</button>
|
|
<button class="btn btn-red" data-action="empty">Empty holder</button>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="holder"></div>
|
|
|
|
<hr>
|
|
|
|
<div class="info-bubble">
|
|
<p>This test loads images with <code>position: absolute;</code>, and when they are done loading, positions them next to each other based on their width.</p>
|
|
|
|
<p>Cloning test checks for premature callback execution in WebKit browsers.
|
|
It it fails, images will be on top of each other in the upper left corner of their holder. This should never happen :)
|
|
<small><em>(You can click on cloned holders to remove them.)</em></small></p>
|
|
</div>
|
|
|
|
<h2>Code</h2>
|
|
|
|
<pre><code class="language-javascript">
|
|
// Call imagesLoaded and position images
|
|
$holder.imagesLoaded(function( $images, $proper, $broken ){
|
|
|
|
var $container = this,
|
|
x = 1;
|
|
|
|
$images.each( function() {
|
|
var $this = $(this).css({ left: x });
|
|
x += $this.width() + 1;
|
|
});
|
|
|
|
$container.width(x);
|
|
|
|
});
|
|
</code></pre>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="advanced">
|
|
|
|
<div class="controlbar clearfix">
|
|
|
|
<div class="fleft btn-group">
|
|
<button class="btn btn-black" data-action="loadImages" data-count="7">Load 7</button>
|
|
<button class="btn btn-black" data-action="loadImages" data-count="14">14</button>
|
|
<button class="btn btn-black" data-action="loadImages" data-count="21">21</button>
|
|
</div>
|
|
|
|
<div class="fright btn-group">
|
|
<button class="btn btn-red" data-action="removeImages" data-count="7">Remove 7</button>
|
|
<button class="btn btn-red" data-action="removeImages" data-count="14">14</button>
|
|
<button class="btn btn-red" data-action="removeImages" data-count="21">21</button>
|
|
</div>
|
|
|
|
<div class="center">
|
|
|
|
<div class="status">
|
|
Total <span class="label totalcount">0</span>
|
|
<span class="divider">/</span>
|
|
Proper <span class="label label-success propercount">0</span>
|
|
<span class="divider">/</span>
|
|
Broken <span class="label label-important brokencount">0</span>
|
|
<span class="divider">/</span>
|
|
Deferred is <span class="label dfdstatus">pending</span>
|
|
</div>
|
|
|
|
<div class="progress progress-success progress-striped">
|
|
<div class="bar"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<ul class="holder clearfix"></ul>
|
|
|
|
<hr>
|
|
|
|
<div class="info-bubble">
|
|
<p>There is 10% chance for loading broken images.</p>
|
|
|
|
<p>As images are being loaded, <code>.progress()</code> method removes loading overlay from proper images, marks broken images as red,
|
|
and updates progress bar to represent loading status.</p>
|
|
|
|
<p>Deferred object is rejected if at least one image in stack is broken.</p>
|
|
|
|
<p>Clicking on images removes the image and updates the stack info. <small><em>(Remove broken images to test deferred resolution.)</em></small></p>
|
|
</div>
|
|
|
|
<h2>Code</h2>
|
|
|
|
<pre><code class="language-javascript">
|
|
// Call imagesLoaded with multiple callbacks, and save the deferred object
|
|
var dfd = $holder.imagesLoaded({
|
|
callback: function($images, $proper, $broken){
|
|
|
|
$totalLabel.text( $images.length );
|
|
$properLabel.text( $proper.length );
|
|
$brokenLabel.text( $broken.length );
|
|
|
|
},
|
|
progress: function (isBroken, $images, $proper, $broken) {
|
|
|
|
var loadingSpan = this.siblings('.loading');
|
|
|
|
if( isBroken ){
|
|
loadingSpan.removeClass('loading').addClass('broken');
|
|
} else {
|
|
loadingSpan.fadeOut(200, function(){ $(this).remove(); });
|
|
}
|
|
|
|
$progressBar.css({ width: Math.round( ( ( $proper.length + $broken.length ) * 100 ) / $images.length ) + '%' });
|
|
|
|
}
|
|
});
|
|
|
|
// Subsequent deferred method registration (not to be used with progress method)
|
|
dfd.always(function(){
|
|
|
|
var dfdState = dfd.state();
|
|
|
|
$dfdLabel.addClass( 'label-' + ( dfdState === 'resolved' ? 'success' : 'important' ) ).text( dfdState );
|
|
|
|
$progress.hide();
|
|
$statusBar.show();
|
|
$progressBar.css({ width: 0 });
|
|
|
|
});
|
|
</code></pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<div class="container">
|
|
<span class="fright"><a href="#top">Back to top ↑</a></span>
|
|
<p>Licensed under the <a href="http://www.opensource.org/licenses/MIT">MIT license</a>.</p>
|
|
<p>Images pulled from <a href="http://lorempixel.com">LoremPixel</a> service with the help of <a href="https://github.com/Darsain/loremImages">loremImages</a> plugin.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="//github.com/desandro/imagesloaded/"><img style="position:absolute;top:0;left:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
|
|
|
<script src="js/vendor/jquery.min.js"></script>
|
|
<script src="js/vendor/plugins.js"></script>
|
|
<script src="jquery.imagesloaded.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
</body>
|
|
</html> |