<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script src="jquery-1.6.4.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() {
// see console output for debug info
ImgCache.options.debug = true;
ImgCache.options.usePersistentCache = true;
ImgCache.init();
};
if (typeof(cordova) !== 'undefined') {
// cordova test
console.log('cordova start');
document.addEventListener('deviceready', startTest, false);
} else {
// normal browser test
startTest();
}
$(document).ready(function () {
var show_img_src = function() {
$('img[data-desc]').each(function() {
$img = $(this);
var $desc = $('#' + $img.attr('data-desc') );
$desc.html('src="' + $img.attr('src') + '"');
});
$('div[data-desc]').each(function() {
$div = $(this);
var $desc = $('#' + $div.attr('data-desc') );
$desc.html('background-image="' + $div.css('background-image') + '"');
});
};
var show_img_is_cached = function() {
$('img[data-is-cached]').each(function() {
$img = $(this);
var $desc = $('#' + $img.attr('data-is-cached') );
var imgSrc = $img.attr('data-old-src') || $img.attr('src');
ImgCache.isCached(imgSrc, function(path, success){
if(success){
$desc.html('Image is cached');
} else {
$desc.html('Image is not cached');
}
})
});
$('div[data-is-cached]').each(function() {
$div = $(this);
var $desc = $('#' + $div.attr('data-is-cached') );
var imgSrc = $div.attr('data-old-background') || $div.attr('src');
ImgCache.isBackgroundCached($div, function(path, success){
if(success) {
$desc.html('Image is cached');
} else {
$desc.html('Image is not cached');
}
})
});
};
$('#clear_cache').click(function(e) {
e.preventDefault();
ImgCache.clearCache();
});
$('#show_src').click(function(e) {
e.preventDefault();
show_img_src();
});
$('#show_is_cached').click(function(e) {
e.preventDefault();
show_img_is_cached();
});
$('#cache_images').click(function(e) {
e.preventDefault();
$('img').each(function() {
ImgCache.cacheFile($(this).attr('src'));
});
$('div').each(function() {
var backgroundImageProperty = $(this).css('background-image');
if(backgroundImageProperty !== "none") {
ImgCache.cacheBackground($(this));
}
});
});
$('#use_cache').click(function(e) {
e.preventDefault();
$('img').each(function() {
ImgCache.useCachedFile($(this));
});
$('div').each(function() {
var backgroundImageProperty = $(this).css('background-image');
if(backgroundImageProperty !== "none") {
ImgCache.useCachedBackground($(this));
}
});
});
$('#use_online').click(function(e) {
e.preventDefault();
$('img').each(function() {
ImgCache.useOnlineFile($(this));
});
$('div').each(function() {
var backgroundImageProperty = $(this).css('background-image');
if(backgroundImageProperty !== "none") {
ImgCache.useBackgroundOnlineFile($(this));
}
});
});
$('#cache_folder').click(function(e) {
$(this).attr('href', ImgCache.getCacheFolderURI());
});
});
</script>
<link rel="stylesheet" href="examples.css">
</head>
<body>
<h1>imgcache.js - example #1</h1>
<div class="clearfix">
<div id="actions">
<h2>Actions</h2>
<ul>
<li><a href="#" id="clear_cache">Clear the local filesystem cache</a></li>
<li><a href="#" id="cache_images">Cache images locally</a></li>
<li><a href="#" id="use_cache">Replace images with cached files</a></li>
<li><a href="#" id="use_online">Revert to original online images</a></li>
<li><a href="#" id="show_src">Show/update img src text</a></li>
<li><a href="#" id="show_is_cached">Show/update cache status</a></li>
<li><a href="#" id="cache_folder" target="new">Navigate into local cache folder</a></li>
</ul>
</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>
<h3>Local image</h3>
<img src="kitty.jpg" width="150" height="157" id="local" data-desc="local_desc" data-is-cached="local_cached" >
<p id="local_desc"></p>
<p id="local_cached"></p>
</div>
<hr>
<div>
<h3>Remote image</h3>
<!-- random image on domain with CORS enabled -->
<img src="http://data-gov.tw.rpi.edu/w/images/thumb/b/b1/State-lib-sum.png/120px-State-lib-sum.png" width="120" height="82" id="remote_cors" data-desc="remote_cors_desc" data-is-cached="remote_cors_cached">
<p id="remote_cors_desc"></p>
<p id="remote_cors_cached"></p>
</div>
<hr>
<div>
<h3>Background image</h3>
<div style="background-image:url(diamond.jpg); height: 266px; width: 214px;" id="background_img" data-desc="background_img_desc" data-is-cached="background_img_cached"></div>
<p id="background_img_desc"></p>
<p id="background_img_cached"></p>
</div>
</body>
</html>