Skip to content

Commit 7b09939

Browse files
paulprinspaulprins
committed
Make defaults easier to customized
1 parent 37b886d commit 7b09939

File tree

1 file changed

+77
-76
lines changed

1 file changed

+77
-76
lines changed

‎jquery.cacheImages.js‎

Lines changed: 77 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,9 @@
1717
* http://www.gnu.org/licenses/gpl.html
1818
*/
1919
(function ($) {
20-
$.fn.cacheImages = function (opts) {
20+
$.fn.cacheImages = function( options ) {
2121
// Set the defaults
22-
this.cacheImagesConfig = $.extend({}, {
23-
debug: false, // Boolean value to enable or disable some of the console messaging for trouble shooting
24-
defaultImage: 'data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAEAsLCwwLEAwMEBcPDQ8XGxQQEBQbHxcXFxcXHx4XGhoaGhceHiMlJyUjHi8vMzMvL0BAQEBAQEBAQEBAQEBAQAERDw8RExEVEhIVFBEUERQaFBYWFBomGhocGhomMCMeHh4eIzArLicnJy4rNTUwMDU1QEA/QEBAQEBAQEBAQEBA/8AAEQgAZABkAwEiAAIRAQMRAf/EAEsAAQEAAAAAAAAAAAAAAAAAAAAFAQEAAAAAAAAAAAAAAAAAAAAAEAEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//2Q==', // URL or base64 string for the default image (will obviously get cached) - default is at assets/default.jpg
25-
encodeOnCanvas: false, // This is still experimental and should be disabled in production
26-
storagePrefix: 'cached', // Used to prefix the URL in at localStorage key
27-
url: null // Allows you to directly set the url for an element
28-
}, opts);
22+
this.cacheImagesConfig = $.extend( {}, $.fn.cacheImages.defaults, options );
2923

3024
// Check for canvas support
3125
this.cacheImagesConfig.encodeOnCanvas = typeof HTMLCanvasElement != undefined ? this.cacheImagesConfig.encodeOnCanvas : false;
@@ -121,92 +115,99 @@
121115
/*
122116
* Here is the magic, this is the function that processes through the caching of the images
123117
*/
124-
$(function () {
125-
// console.log( $(self) );
126-
$(self).each(function (i, img) {
127-
var $this = $(img),
128-
src = $this.prop('src') || $this.data('cachedImageSrc');
129-
if( self.cacheImagesConfig.url !== null ){ // URL set in the opts
130-
src = self.cacheImagesConfig.url;
131-
$this.prop('src', '');
132-
}
133118

134-
var key = self.cacheImagesConfig.storagePrefix + ':' + src, // Prepare the localStorage key
135-
localSrcEncoded = localStorage[key];
119+
// console.log( $(self) );
120+
return this.each(function (i, img) {
121+
var $this = $(img),
122+
src = $this.prop('src') || $this.data('cachedImageSrc');
123+
if( self.cacheImagesConfig.url !== null ){ // URL set in the opts
124+
src = self.cacheImagesConfig.url;
125+
$this.prop('src', '');
126+
}
136127

137-
if( typeof localStorage !== "object" ){ // See if local storage is working
138-
if( self.cacheImagesConfig.debug ){ console.log("localStorage is not available"); }
139-
return false; // Unable to cache, so stop looping
140-
}
128+
var key = self.cacheImagesConfig.storagePrefix + ':' + src, // Prepare the localStorage key
129+
localSrcEncoded = localStorage[key];
141130

142-
if( typeof src === 'undefined' ){ return true; } // Move to the next item
143-
if( typeof $this.prop('src') !== 'undefined' && $this.prop('src').substring(0,5) === 'data:' ){ return true; } // This has already been converted
131+
if( typeof localStorage !== "object" ){ // See if local storage is working
132+
if( self.cacheImagesConfig.debug ){ console.log("localStorage is not available"); }
133+
return false; // Unable to cache, so stop looping
134+
}
144135

145-
136+
if( typeof src === 'undefined' ){ return true; } // Move to the next item
137+
if( typeof $this.prop('src') !== 'undefined' && $this.prop('src').substring(0,5) === 'data:' ){ return true; } // This has already been converted
146138

147-
if( localSrcEncoded && /^data:image/.test( localSrcEncoded ) ) {
148-
// Check if the image has already been cached, if it has lets bounce out of here
149-
$this.data('cachedImageSrc', src);
150-
$this.prop('src', localSrcEncoded);
151-
}else{
152-
// The image has not yet been cached, so we need to get on that.
153-
$this.prop('src', ''); // This will cancel the request if it hasn't already been finished
154-
var imgType = src.match(/\.(jpg|jpeg|png|gif)$/i); // Break out the filename to get the type
155-
if( imgType && imgType.length){ // Get us the type of file
156-
imgType = imgType[1].toLowerCase() == 'jpg' ? 'jpeg' : imgType[1].toLowerCase();
157-
}
158-
if( typeof imgType === 'undefined' ){ return true; }
139+
159140

141+
if( localSrcEncoded && /^data:image/.test( localSrcEncoded ) ) {
142+
// Check if the image has already been cached, if it has lets bounce out of here
143+
$this.data('cachedImageSrc', src);
144+
$this.prop('src', localSrcEncoded);
145+
}else{
146+
// The image has not yet been cached, so we need to get on that.
147+
$this.prop('src', ''); // This will cancel the request if it hasn't already been finished
148+
var imgType = src.match(/\.(jpg|jpeg|png|gif)$/i); // Break out the filename to get the type
149+
if( imgType && imgType.length){ // Get us the type of file
150+
imgType = imgType[1].toLowerCase() == 'jpg' ? 'jpeg' : imgType[1].toLowerCase();
151+
}
152+
if( typeof imgType === 'undefined' ){ return true; }
160153

161-
if( localStorage[key] !== 'pending' ){
162-
localStorage[key] = 'pending';
163-
$this.data('cachedImageSrc', src);
164154

165-
if( self.cacheImagesConfig.encodeOnCanvas && imgType !== 'gif' ){
166-
$this.load(function () {
167-
localStorage[key] = src = base64EncodeCanvas( img );
168-
if( src.substring(0,5) === 'data:' ){
169-
$this.prop('src', localStorage[key] );
170-
if( $this.is('.cacheImagesRemove') ){
171-
$this.remove();
172-
}
155+
if( localStorage[key] !== 'pending' ){
156+
localStorage[key] = 'pending';
157+
$this.data('cachedImageSrc', src);
158+
159+
if( self.cacheImagesConfig.encodeOnCanvas && imgType !== 'gif' ){
160+
$this.load(function () {
161+
localStorage[key] = src = base64EncodeCanvas( img );
162+
if( src.substring(0,5) === 'data:' ){
163+
$this.prop('src', localStorage[key] );
164+
if( $this.is('.cacheImagesRemove') ){
165+
$this.remove();
173166
}
174-
});
175-
}else{
176-
var xhr = new XMLHttpRequest();
177-
xhr.open('GET', src, true);
178-
xhr.responseType = 'arraybuffer'; // Cannot use the jQuery ajax method until it support this response type
179-
xhr.onload = function( e ){
180-
if (this.status == 200 && e.totalSize > 0 ){
181-
localStorage[key] = 'data:image/' + imgType + ';base64,' + base64EncodeResponse( this.response );
182-
$this.prop('src', localStorage[key] );
183-
if( $this.is('.cacheImagesRemove') ){
184-
$this.remove();
185-
}
186-
}else{
187-
localStorage[key] = 'error';
188-
// Display the default image
189-
if( typeof self.cacheImagesConfig.defaultSrc !== 'undefined' ){
190-
var defaultKey = self.cacheImagesConfig.storagePrefix + ':' + self.cacheImagesConfig.defaultSrc;
191-
if( typeof localStorage[defaultKey] !== 'undefined' ){
192-
$this.prop('src', localStorage[defaultKey] );
193-
}else{
194-
$this.cacheImages({url: self.cacheImagesConfig.defaultSrc }); // Will cache it, and display it here
195-
}
167+
}
168+
});
169+
}else{
170+
var xhr = new XMLHttpRequest();
171+
xhr.open('GET', src, true);
172+
xhr.responseType = 'arraybuffer'; // Cannot use the jQuery ajax method until it support this response type
173+
xhr.onload = function( e ){
174+
if (this.status == 200 && e.totalSize > 0 ){
175+
localStorage[key] = 'data:image/' + imgType + ';base64,' + base64EncodeResponse( this.response );
176+
$this.prop('src', localStorage[key] );
177+
if( $this.is('.cacheImagesRemove') ){
178+
$this.remove();
179+
}
180+
}else{
181+
localStorage[key] = 'error';
182+
// Display the default image
183+
if( typeof self.cacheImagesConfig.defaultSrc !== 'undefined' ){
184+
var defaultKey = self.cacheImagesConfig.storagePrefix + ':' + self.cacheImagesConfig.defaultSrc;
185+
if( typeof localStorage[defaultKey] !== 'undefined' ){
186+
$this.prop('src', localStorage[defaultKey] );
196187
}else{
197-
$this.prop('src', self.cacheImagesConfig.defaultImage );
188+
$this.cacheImages({url: self.cacheImagesConfig.defaultSrc }); // Will cache it, and display it here
198189
}
190+
}else{
191+
$this.prop('src', self.cacheImagesConfig.defaultImage );
199192
}
200-
};
201-
xhr.send();
202-
}
193+
}
194+
};
195+
xhr.send();
203196
}
204197
}
205-
});
198+
}
206199
});
207200

208201
return this;
209202
};
203+
// Plugin defaults – added as a property on our plugin function.
204+
$.fn.cacheImages.defaults = {
205+
debug: false, // Boolean value to enable or disable some of the console messaging for trouble shooting
206+
defaultImage: 'data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAEAsLCwwLEAwMEBcPDQ8XGxQQEBQbHxcXFxcXHx4XGhoaGhceHiMlJyUjHi8vMzMvL0BAQEBAQEBAQEBAQEBAQAERDw8RExEVEhIVFBEUERQaFBYWFBomGhocGhomMCMeHh4eIzArLicnJy4rNTUwMDU1QEA/QEBAQEBAQEBAQEBA/8AAEQgAZABkAwEiAAIRAQMRAf/EAEsAAQEAAAAAAAAAAAAAAAAAAAAFAQEAAAAAAAAAAAAAAAAAAAAAEAEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//2Q==', // URL or base64 string for the default image (will obviously get cached) - default is at assets/default.jpg
207+
encodeOnCanvas: false, // This is still experimental and should be disabled in production
208+
storagePrefix: 'cached', // Used to prefix the URL in at localStorage key
209+
url: null // Allows you to directly set the url for an element
210+
};
210211
/*
211212
* Manually cache an image into the local storage
212213
*/

0 commit comments

Comments
 (0)