Skip to content

Commit 628b897

Browse files
paulprinspaulprins
committed
Add callbacks to Drop function, also added a forceSave to the query options
1 parent babdbad commit 628b897

File tree

6 files changed

+45
-28
lines changed

6 files changed

+45
-28
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $.fn.cacheImages.defaults.debug = true; // Globally Set
2020
* *fail*: callback when the caching is not possible (unable to reach the file, or unable to cache file)
2121
* *storagePrefix*: Used to prefix the URL in the localStorage key [default: 'cached']
2222
* *url*: Set the image URL to be cached for the selector [default: null]
23+
* *forceSave*: Will force the call to cache to save the current URL even if media from that URL has already been cached. [default: false] **Don't set Globally**
2324

2425
### Attaching to an Element
2526
`$('img#AnElement').cacheImages();`
@@ -55,7 +56,9 @@ If you need to use an image in your inline css, or in another context where you
5556

5657
Helpful to clean up stored images from the cache without dropping everything stored. You can optionally set a *url*, and/or *storagePrefix* in the function to only drop specific image, or set of images.
5758

58-
59+
## indexDB and callbacks
60+
One of the major differences between localstorage and indexDB is that the queries to the database happen out of the functional flow of your script. This means you must use callbacks to excecute scripts with the outcome, or after the conclusion of the previous script. Not using callbacks can result in weird behavior.
61+
5962
# Credits and Thanks
6063
* Based Heavily off of @doomhz plugin [jQueryImageCache](https://github.com/doomhz/jQuery-Image-Cache)
6164
* Utilizing base64 encoding from @mathias [Encoding XHR image data](http://jsperf.com/encoding-xhr-image-data/33)

‎demo.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>jQuery Cache Images v1.0 Plug-in Demo</title>
4+
<title>jQuery Cache Images v1.1 Plug-in Demo</title>
55

66
<meta charset="utf-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- please don't add "maximum-scale=1" here. It's bad for accessibility. -->
88
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
99

1010
<script type="text/javascript" src="assets/jquery-1.9.1.js"></script>
1111
<script type="text/javascript" src="jquery.cacheImages.js"></script>
12-
12+
<!-- <script type="text/javascript" src="jquery.cacheImages.indexeddb.js"></script> --><!-- Uncomment this to test indexedDB storage -->
1313
</head>
1414
<body>
1515

16-
<h1>jQuery Cache Images v1.0 Plug-in</h1>
16+
<h1>jQuery Cache Images v1.1 Plug-in</h1>
1717
<a href="index.html">Back to Index</a>
1818

1919
<p>Use the following buttons to perform some basic checks on the cache</p>
@@ -52,7 +52,7 @@ <h2>Flickr Test</h2>
5252

5353
<script type="text/javascript">
5454
// $.fn.cacheImages.defaults.defaultImage = 'http://upload.wikimedia.org/wikipedia/commons/f/f8/Monocle_with_gallery.jpg';
55-
// $.fn.cacheImages.defaults.debug = true;
55+
$.fn.cacheImages.defaults.debug = true;
5656
// $.fn.cacheImages.defaults.always = function(){
5757
// console.log('finished running');
5858
// };

‎jquery.cacheImages.indexeddb.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,10 @@ window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndex
153153
/*
154154
* Will remove all of the cached images from their localStorage
155155
*/
156-
$.fn.cacheImages.drop = function( url, storagePrefix ){
156+
$.fn.cacheImages.drop = function( url, callbackFunction, storagePrefix ){
157157
var dropKeys = []; // Store the keys we need to drop here
158158
if( typeof storagePrefix === 'undefined' ){ storagePrefix = $.fn.cacheImages.defaults.storagePrefix; }
159-
if( typeof url === 'undefined' ){ url = null; }
159+
if( typeof url === 'undefined' ){ url = null; } // DROP ALL THE THINGS
160160

161161
var request = window.cacheImagesDb.transaction("offlineImages", "readonly").objectStore("offlineImages").openCursor();
162162
request.onsuccess = function(e) {
@@ -175,16 +175,19 @@ window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndex
175175

176176
if( dropKeys.length === 0 ){
177177
if( $.fn.cacheImages.defaults.debug ){ console.log( 'No Images to Drop' ); }
178-
return true;
179-
}
178+
}else{
179+
// Drop the keys we found
180+
for( i = 0; i < dropKeys.length; i++ ){
181+
if( $.fn.cacheImages.defaults.debug ){console.log( 'Dropping localStorage Key:', dropKeys[i] ); } // Let them know what keys were dropped
182+
window.cacheImagesDb.transaction("offlineImages", "readwrite").objectStore("offlineImages").delete( dropKeys[i] );
183+
}
180184

181-
// Drop the keys we found
182-
for( i = 0; i < dropKeys.length; i++ ){
183-
if( $.fn.cacheImages.defaults.debug ){console.log( 'Dropping localStorage Key:', dropKeys[i] ); } // Let them know what keys were dropped
184-
window.cacheImagesDb.transaction("offlineImages", "readwrite").objectStore("offlineImages").delete( dropKeys[i] );
185+
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropped ' + dropKeys.length + ' images from indexedDB' ); } // Provide a bit of feedback for developers
185186
}
186187

187-
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropped ' + dropKeys.length + ' images from indexedDB' ); } // Provide a bit of feedback for developers
188+
if( typeof callbackFunction === 'function' ){
189+
callbackFunction.call(thisElem, key, encodedString ); // This is the structure to use for our callbacks
190+
}
188191
return true;
189192
}
190193
};

‎jquery.cacheImages.indexeddb.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery.cacheImages.js‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
// Check for canvas support
2525
this.cacheImagesConfig.encodeOnCanvas = typeof HTMLCanvasElement != undefined ? this.cacheImagesConfig.encodeOnCanvas : false;
2626

27+
// Check for force Save regardless of current cached state
28+
if( typeof this.cacheImagesConfig.forceSave == undefined ){ this.cacheImagesConfig.forceSave = false; }
29+
2730
var self = this;
2831

2932

@@ -72,8 +75,8 @@
7275

7376
var key = self.cacheImagesConfig.storagePrefix + ':' + src; // Prepare the image key
7477
$.fn.cacheImages.get( $this, key, function( key, localSrcEncoded ){
75-
76-
if( localSrcEncoded && /^data:image/.test( localSrcEncoded ) ) {
78+
self.cacheImagesConfig.forceSave
79+
if( localSrcEncoded && /^data:image/.test( localSrcEncoded ) && self.cacheImagesConfig.forceSave == false ) {
7780
// Check if the image has already been cached, if it has lets bounce out of here
7881
this.data('cachedImageSrc', src);
7982
if( this.data('cachedImageType') == 'src' ){
@@ -319,7 +322,7 @@
319322
/*
320323
* Retreive the encoded string from local storage
321324
*/
322-
$.fn.cacheImages.Output = function( url, callback, storagePrefix ){
325+
$.fn.cacheImages.Output = function( url, callbackFunction, storagePrefix ){
323326
if( typeof storagePrefix === 'undefined' ){ storagePrefix = $.fn.cacheImages.defaults.storagePrefix; }
324327
var tempKey = storagePrefix + ':' + url;
325328
if( window.localStorage.getItem( tempKey ) != null ){
@@ -332,6 +335,10 @@
332335

333336
tempKey = storagePrefix + ':' + this.cacheImagesConfig.defaultImage;
334337
if( window.localStorage.getItem( tempKey ) != null ){
338+
if( typeof callbackFunction === 'function' ){
339+
callbackFunction.call( thisElem, tempKey ); // This is the structure to use for our callbacks
340+
}
341+
335342
return window.localStorage.getItem( tempKey ); // Default URL was already cached
336343
}
337344
}
@@ -341,11 +348,11 @@
341348
/*
342349
* Will remove all of the cached images from their localStorage
343350
*/
344-
$.fn.cacheImages.drop = function( url, storagePrefix ){
351+
$.fn.cacheImages.drop = function( url, callbackFunction, storagePrefix ){
345352
var dropKeys = [], // Store the keys we need to drop here
346353
debug = false;
347354
if( typeof storagePrefix === 'undefined' ){ storagePrefix = $.fn.cacheImages.defaults.storagePrefix; }
348-
if( typeof url === 'undefined' ){ url = null; }
355+
if( typeof url === 'undefined' ){ url = null; } // DROP ALL THE THINGS
349356

350357
// Lets get our loop on
351358
for (i = 0; i < window.localStorage.length; i++) {
@@ -357,16 +364,20 @@
357364

358365
if( dropKeys.length === 0 ){
359366
if( $.fn.cacheImages.defaults.debug ){ console.log( 'No Images to Drop' ); }
360-
return;
361-
}
367+
}else{
368+
// Drop the keys we found
369+
for( i = 0; i < dropKeys.length; i++ ){
370+
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropping localStorage Key:', dropKeys[i] ); } // Let them know what keys were dropped
371+
window.localStorage.removeItem( dropKeys[i] );
372+
}
362373

363-
// Drop the keys we found
364-
for( i = 0; i < dropKeys.length; i++ ){
365-
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropping localStorage Key:', dropKeys[i] ); } // Let them know what keys were dropped
366-
window.localStorage.removeItem( dropKeys[i] );
374+
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropped ' + dropKeys.length + ' images from storage' ); } // Provide a bit of feedback for developers
367375
}
368376

369-
if( $.fn.cacheImages.defaults.debug ){ console.log( 'Dropped ' + dropKeys.length + ' images from storage' ); } // Provide a bit of feedback for developers
377+
if( typeof callbackFunction === 'function' ){
378+
callbackFunction.call( thisElem, url ); // This is the structure to use for our callbacks
379+
}
380+
370381
return;
371382
};
372383
})(jQuery);

0 commit comments

Comments
 (0)