-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
175 lines (148 loc) · 6.99 KB
/
demo.html
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
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Cache Images v1.8 Plug-in Demo</title>
<meta charset="utf-8">
<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. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>jQuery Cache Images v1.8 Plug-in</h1>
<a href="index.html">Back to Index</a>
<p>Use the following buttons to perform some basic checks on the cache</p>
<p>
<button id="cacheLoadAll">Display all cached images</button>
<button onclick="$('#statWindow').html('');">Empty Display</button>
<button id="dropCache">Empty the Cache</button>
<button id="corruptCat">Corrupt the Cat Gif</button>
</p>
<div id="statWindow" style="text-align: center; border: 5px solid; min-height: 40px; margin: 15px; padding: 10px;"></div>
<p>Images are kept in browser's Local Storage as a base64 encoded string. Below are three images and an image that links to a non-existant file so it shows the default.</p>
<div id="DemoImages">
<img id="test1" src="assets/x-all-the-things.png" style="height: 175px;" />
<img id="test2" src="assets/cat.gif" style="height: 175px;" />
<img id="test3" src="assets/warhol.jpg" style="height: 175px;" />
<img id="test4" src="assets/this-image-path-does-not-exist.jpg" style="height: 175px;" />
</div>
<h2>Flickr Test</h2>
<div>
Here is a dynamic example where we will fetch a bunch of images from Flickr, dynamically insert them into the page, and they all get cached. Some of the images are restricted by a same origin policy which will generate errors in your console. But this is a configuration issue with Flickr - not the caching. Presumably you'll have control of your content and can ensure it is accessible.
</div>
<div style="text-align: center; margin-top: 2em;">
<label for="FlickrTags">Search Tags</label>
<input type="text" id="FlickrTags" value="goat,pasture" />
<button id="FlickrTest">Load Some Flickr Images</button>
<button onclick="$('#flickrTest').html('');">Empty Display</button>
</div>
<div id="flickrTest" style="text-align: left; border: 5px solid; min-height: 40px; margin: 15px; padding: 10px;">
</div>
<script src="assets/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.cacheImages.js" type="text/javascript" charset="utf-8"></script>
<!-- Uncomment the next line to test indexedDB storage -->
<!-- <script src="jquery.cacheImages.indexeddb.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
$.fn.cacheImages.defaults.debug = true;
$.fn.cacheImages.defaults.defaultImage = window.location.origin + window.location.pathname.substr(0, window.location.pathname.length - 10) + '/assets/no-image.png';
// $.fn.cacheImages.defaults.always = function(){
// console.log('finished running');
// };
// $.fn.cacheImages.defaults.done = function( image ){
// console.log('Finished Correctly');
// };
// $.fn.cacheImages.defaults.fail = function(){
// console.log('Error Happened');
// };
$(document).ready(function(){
$('#DemoImages img').cacheImages();
});
$(function(){
// $('#flickrTest').cacheImages({debug: true});
$(document).on('click','#dropCache', function(){ $.fn.cacheImages.drop(); });
$(document).on('click','#cacheLoadAll', function(){ cacheImagesShowAll( $('#statWindow') ); });
$(document).on('click','#corruptCat', function(){
$.fn.cacheImages.set(
this,
'cached:' + window.location.origin + window.location.pathname.substr(0, window.location.pathname.length - 10) + '/assets/cat.gif',
'data:image/gif;base64,totally not a valid image at all=' );
});
$(document).on('click','#FlickrTest', function(){
if( $('#FlickrTags').val() === ''){
$('#FlickrTags').val('goat,pasture');
}
var jxhr = $.ajax( 'http://api.flickr.com/services/feeds/photos_public.gne?tags=paris,church&lang=en-us&format=json',
{ type: 'get',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
data: {'tags': $('#FlickrTags').val(),
'lang': 'en-us',
'format': 'json'},
})
.done( function( data, textStatus, jqXHR ){
var items = [];
$.each( data.items, function( key, photo ) {
// $.fn.cacheImages.fetchURL( photo.media.m ); // Cache the image for later use
$('#flickrTest').append( $('<img />').cacheImages({url: photo.media.m}) ); // Using the caching immediately
});
});
});
});
/*
* Grab all of the images and display them inside the container
*/
var cacheKeys = [], // Store the keys we need to drop here
debug = true;
var cacheImagesShowAll = function( container, storagePrefix ){
if( typeof storagePrefix === 'undefined' ){ storagePrefix = 'cached'; }
var cacheKeys = []; // Store the keys we need to drop here
// Lets get our loop on
if( $.fn.cacheImages.defaults.storageDB == 'localStorage' ){
// Using Local Storage
for (i = 0; i < window.localStorage.length; i++) {
if( window.localStorage.key(i).substr( 0, storagePrefix.length + 1 ) !== storagePrefix + ':' ){ continue; } // Does not match our prefix?
cacheKeys.push( window.localStorage.key(i).substr( storagePrefix.length+1 ) ); // Droping the keys here re-indexes the localStorage so that the offset in our loop is wrong
}
cacheImagesDislayAll( container, cacheKeys );
}else{
// Using IndexedDB
var request = window.cacheImagesDb.transaction("offlineImages", "readonly").objectStore("offlineImages").openCursor();
request.onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
// Called for each matching record.
if( cursor.value.key.substr( 0,storagePrefix.length + 1 ) === storagePrefix + ':' ){ // Does not match our prefix?
cacheKeys.push( cursor.value.key.substr( storagePrefix.length+1 ) );
}
cursor.continue();
}else{
cacheImagesDislayAll( container, cacheKeys );
}
};
}
return true;
},
cacheImagesDislayAll = function( container, cacheKeys ){
if( cacheKeys.length === 0 ){
if( window.debug ){ console.log( 'No Images to Display' ); }
return true;
}
// Show the images we found
for( i = 0; i < cacheKeys.length; i++ ){
// if( $('#' + cacheKeys[i] ).length > 0 ){ continue; }
if( window.localStorage.getItem( cacheKeys[i] ) === 'pending' ){ continue; }
if( window.localStorage.getItem( cacheKeys[i] ) === 'error' ){ continue; }
if( true ){
// Display using the cacheImages native function [Preferred]
container.append( $('<img />').height('175px').cacheImages({ url: cacheKeys[i] }));
}else{
// Display using teh cacheImages Output() function via the callback.
$.fn.cacheImages.Output( cacheKeys[i], function( image ){
// console.log( image.substr(0, 50) );
container.append( $('<img />').prop( 'src', image ).height('175px') );
});
}
}
return true;
}
</script>
</body>
</html>