JS Tutorial
- Overview
- Documents
Cache Images is a plugin for jQuery that allows for the easy caching of image files in the browsers localStorage. The local storage approach allows the media to persist across sessions, while the browser manages all of the cross-domain privacy protections.
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="assets/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.cacheImages.js"></script>
2. HTML
<div id="DemoImages"> <img src="assets/x-all-the-things.png" /> <img src="assets/cat.gif" /> <img src="assets/warhol.jpg" /> <img src="assets/broken-image-path.jpg" /> </div>
3. JAVASCRIPT
$('#DemoImages img').cacheImages();
4. OPTIONS
Each of these is optional. You can set them in the function call (locally), or set them globally.
$('img').cacheImages({debug: true;}) // Locally Set
$.fn.cacheImages.defaults.debug = true; // Globally Set
- always: callback that is last to run, and runs for every call
- debug: Enables a lot of console messaging to help you troubleshoot [default: false]
- defaultImage: URL or base64 string for the default image (will obviously get cached) - default is at assets/default.jpg
- done: callback when the cache was successfully fetched or placed
- encodeOnCanvas: Experimental use of the HTML5 canvas element to encode the images | Not recommended for production [default: false]
- fail: callback when the caching is not possible (unable to reach the file, or unable to cache file)
- storagePrefix: Used to prefix the URL in the localStorage key [default: 'cached']
- url: Set the image URL to be cached for the selector [default: null]
5. ADVANCED
Attaching to an Element
$('img#AnElement').cacheImages();
Any selector here works, however it will bind to only existing elements. If you need to have the caching work on future dynamically created elements use the second approach.
Attached to a Parent Container Coming Soon
$('div#AwesomeContainer').cacheImages();
This will watch for changes to the parent and all child elements for changes that involve images. The plugin will step in, cache the image into local storage, and reveil the image to the user.
$('img').cacheImages({url: 'http://upload.wikimedia.org/wikipedia/commons/1/1d/Fishfinger1.jpg'};
Allows you to easily drop caching into your dom additions. It will look at the cached files, and if none exist, it will insert the default image, and attempt to fetch the specified image.
$.fn.cacheImages.fetchURL('http://upload.wikimedia.org/wikipedia/commons/9/92/Muraltmuur.jpg');
Attempts to cache that image into your clients browser local storage. This can be very helpful if you have an app where you are storying data into webSQL or IndexedDB and want to grab images during an initial sync, but those images might not be needed until later. By caching the images early you ensure that they would be available along with the other data.
These images would later be automatically placed due to element or parent binding, or you could manually place them (see below).
$.fn.cacheImages.Output('http://upload.wikimedia.org/wikipedia/commons/9/92/Muraltmuur.jpg');
If you need to use an image in your inline css, or in another context where you just need the encoded string you should use this function. It will return the encoded string if it has already been cached, or it will return the default (if that is already encoded), or null. This will not fetch the URL since that is an asynchronous event that cannot return your output.
$.fn.cacheImages.drop();
Helpful to clean up stored images from the cache without dropping everything stored. You can optionally set a storagePrefix in the function to only drop specific types of images.
