Skip to content

Commit

Permalink
Added jQuery Preload as dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
Leonidas-from-XIV committed May 13, 2009
1 parent 8252082 commit 2f638a7
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 5 deletions.
7 changes: 4 additions & 3 deletions demo/demo.html
Expand Up @@ -15,10 +15,11 @@
border: 2px dotted gray;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="external/jquery.event.special.gesture.js"></script>
<script type="text/javascript" src="external/jquery.gestureable.js"></script>
<script type="text/javascript" src="external/jquery.event.special.gesture.js"></script>
<script type="text/javascript" src="external/jquery.gestureable.js"></script>
<script type="text/javascript" src="external/jquery.preload.js"></script>
<script type="text/javascript" src="../jquery.flipbook.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Expand Down
161 changes: 161 additions & 0 deletions demo/external/jquery.preload.js
@@ -0,0 +1,161 @@
/**
* jQuery.Preload
* Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com
* Dual licensed under MIT and GPL.
* Date: 3/25/2009
*
* @projectDescription Multifunctional preloader
* @author Ariel Flesler
* @version 1.0.8
*
* @id jQuery.preload
* @param {String, jQuery, Array< String, <a>, <link>, <img> >} original Collection of sources to preload
* @param {Object} settings Hash of settings.
*
* @id jQuery.fn.preload
* @param {Object} settings Hash of settings.
* @return {jQuery} Returns the same jQuery object, for chaining.
*
* @example Link Mode:
* $.preload( '#images a' );
*
* @example Rollover Mode:
* $.preload( '#images img', {
* find:/\.(gif|jpg)/,
* replace:'_over.$1'
* });
*
* @example Src Mode:
* $.preload( [ 'red', 'blue', 'yellow' ], {
* base:'images/colors/',
* ext:'.jpg'
* });
*
* @example Placeholder Mode:
* $.preload( '#images img', {
* placeholder:'placeholder.jpg',
* notFound:'notfound.jpg'
* });
*
* @example Placeholder+Rollover Mode(High res):
* $.preload( '#images img', {
* placeholder:true,
* find:/\.(gif|jpg)/,
* replace:'_high.$1'
* });
*/
;(function( $ ){

var $preload = $.preload = function( original, settings ){
if( original.split ) // selector
original = $(original);

settings = $.extend( {}, $preload.defaults, settings );
var sources = $.map( original, function( source ){
if( !source )
return; // skip
if( source.split ) // URL Mode
return settings.base + source + settings.ext;
var url = source.src || source.href; // save the original source
if( typeof settings.placeholder == 'string' && source.src ) // Placeholder Mode, if it's an image, set it.
source.src = settings.placeholder;
if( url && settings.find ) // Rollover mode
url = url.replace( settings.find, settings.replace );
return url || null; // skip if empty string
});

var data = {
loaded:0, // how many were loaded successfully
failed:0, // how many urls failed
next:0, // which one's the next image to load (index)
done:0, // how many urls were tried
/*
index:0, // index of the related image
found:false, // whether the last one was successful
*/
total:sources.length // how many images are being preloaded overall
};

if( !data.total ) // nothing to preload
return finish();

var imgs = $(Array(settings.threshold+1).join('<img/>'))
.load(handler).error(handler).bind('abort',handler).each(fetch);

function handler( e ){
data.element = this;
data.found = e.type == 'load';
data.image = this.src;
data.index = this.index;
var orig = data.original = original[this.index];
data[data.found?'loaded':'failed']++;
data.done++;

// This will ensure that the images aren't "un-cached" after a while
if( settings.enforceCache )
$preload.cache.push(
$('<img/>').attr('src',data.image)[0]
);

if( settings.placeholder && orig.src ) // special case when on placeholder mode
orig.src = data.found ? data.image : settings.notFound || orig.src;
if( settings.onComplete )
settings.onComplete( data );
if( data.done < data.total ) // let's continue
fetch( 0, this );
else{ // we are finished
if( imgs && imgs.unbind )
imgs.unbind('load').unbind('error').unbind('abort'); // cleanup
imgs = null;
finish();
}
};
function fetch( i, img, retry ){
// IE problem, can't preload more than 15
if( img.attachEvent /* msie */ && data.next && data.next % $preload.gap == 0 && !retry ){
setTimeout(function(){ fetch( i, img, true ); }, 0);
return false;
}
if( data.next == data.total ) return false; // no more to fetch
img.index = data.next; // save it, we'll need it.
img.src = sources[data.next++];
if( settings.onRequest ){
data.index = img.index;
data.element = img;
data.image = img.src;
data.original = original[data.next-1];
settings.onRequest( data );
}
};
function finish(){
if( settings.onFinish )
settings.onFinish( data );
};
};

// each time we load this amount and it's IE, we must rest for a while, make it lower if you get stack overflow.
$preload.gap = 14;
$preload.cache = [];

$preload.defaults = {
threshold:2, // how many images to load simultaneously
base:'', // URL mode: a base url can be specified, it is prepended to all string urls
ext:'', // URL mode:same as base, but it's appended after the original url.
replace:'' // Rollover mode: replacement (can be left empty)
/*
enforceCache: false, // If true, the plugin will save a copy of the images in $.preload.cache
find:null, // Rollover mode: a string or regex for the replacement
notFound:'' // Placeholder Mode: Optional url of an image to use when the original wasn't found
placeholder:'', // Placeholder Mode: url of an image to set while loading
onRequest:function( data ){ ... }, // callback called every time a new url is requested
onComplete:function( data ){ ... }, // callback called every time a response is received(successful or not)
onFinish:function( data ){ ... } // callback called after all the images were loaded(or failed)
*/
};

$.fn.preload = function( settings ){
$preload( this, settings );
return this;
};

})( jQuery );
6 changes: 4 additions & 2 deletions jquery.flipbook.js
Expand Up @@ -6,6 +6,7 @@
* - jQuery 1.3.2 (http://jquery.com/)
* - jQuery UI 1.7.1 (http://jqueryui.com/)
* - jQuery Event Special Gesture (http://code.google.com/p/jquery-event-special-gesture/)
* - jQuery Preload (http://flesler.blogspot.com/2008/01/jquerypreload.html)
*/

(function($) {
Expand Down Expand Up @@ -136,7 +137,8 @@
}

jQuery.fn.flipbook = function (images) {
var div = this;
/* jQuery entry point for this plugin */
var div = this;
// delete everything that was inside the div
// (people might want to write an JavaScript-less fallback there)
div.empty();
Expand Down Expand Up @@ -199,5 +201,5 @@

// return the passed object, since this is jQuery
return div;
}
};
})(jQuery);

0 comments on commit 2f638a7

Please sign in to comment.