<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.imagesloaded.min.js"></script>
<script src="../js/imgcache.js"></script>
<!-- only for cordova (replace by phonegap.js for phonegap) - ignore on desktop browser -->
<script src="../cordova.js"></script>
<script>
var startTest = function() {
/* Note: this is using version 2.x of the imagesloaded library, use of current version might differ */
$('body').imagesLoaded(function($images, $proper, $broken ) {
// see console output for debug info
ImgCache.options.debug = true;
ImgCache.options.usePersistentCache = true;
ImgCache.init(function() {
// 1. cache images
for (var i = 0; i < $proper.length; i++) {
ImgCache.cacheFile($($proper[i]).attr('src'));
}
// 2. broken images get replaced
for (var i = 0; i < $broken.length; i++) {
ImgCache.useCachedFile($($broken[i]));
}
});
});
};
if (typeof(cordova) !== 'undefined') {
// cordova test
document.addEventListener('deviceready', startTest, false);
} else {
// normal browser test
$(document).ready(startTest);
}
</script>
<link rel="stylesheet" href="examples.css">
</head>
<body>
<h1>imgcache.js - example #2</h1>
<div class="clearfix">
<div id="actions">
<ol>
<li>Open page locally (file:// in Chrome) or in Phonegap/Cordova</li>
<li>Work offline</li>
<li>Reload the page (or re-start the web app)</li>
<li>You should see the images reloaded from the cache</li>
</ol>
<p>Note: this is using version 2.x of the imagesloaded library, use of current version might differ</p>
</ol>
</div>
<div class="note">
<p>Don't forget to accept your browser request to store data on the local computer!</p>
</div>
<div class="note">
<p>If this file is opened in Chrome from a "file://" url, run Chrome with the following flags: <code>--allow-file-access-from-files --allow-file-access</code> in order to <a href="http://stackoverflow.com/questions/6427870/html5-file-api-security-error-while-reading-a-file">avoid a security error</a>.</p>
<p>Otherwise run the page from a web server - <a href="http://updates.html5rocks.com/2011/08/Debugging-the-Filesystem-API">More info</a></p>
</div>
</div>
<div>
<!-- random image on domain with CORS enabled -->
<h2>Random test images</h2>
<img src="http://data-gov.tw.rpi.edu/w/images/thumb/b/b1/State-lib-sum.png/120px-State-lib-sum.png">
<img src="http://data-gov.tw.rpi.edu/w/images/thumb/f/f1/Processing_Tutorial_Finished.png/180px-Processing_Tutorial_Finished.png">
<img src="http://data-gov.tw.rpi.edu/w/images/thumb/d/d7/Ec2.png/150px-Ec2.png">
</div>
</body>
</html>