content/js/jquery-preload.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
----- ----- /** * 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 ); |