{"name":"Jquery-cache-images","tagline":"Plugin for jQuery that allows for the easy caching of image files in the browsers LocalStorage. Can be bound elements or parents.","body":"#jQuery Cache Images plugin  \r\n  \r\nPlugin 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.  \r\n  \r\n## Using the Plugin  \r\nThe plugin can be used two ways. It can either be applied to a specific element in the DOM, or you can apply it to a container that will have images within it. Both approached will bind the Cache Image plugin to all future changes that occur to those elements or their children.  \r\n  \r\n**Options**  \r\nEach of these is optional.  \r\n\r\n* *debug*: Enables a lot of console messaging to help you troubleshoot [default: false]  \r\n* *defaultImage*: URL or base64 string for the default image (will obviously get cached) - default is at assets/default.jpg  \r\n* *encodeOnCanvas*: Experimental use of the HTML5 canvas element to encode the images | Not recommended for production [default: false]  \r\n* *storagePrefix*: Used to prefix the URL in the localStorage key\t[default: 'cached']  \r\n* *url*: Set the image URL to be cached for the selector [default: null]  \r\n  \r\n### Attaching to an Element  \r\n`$('img#AnElement').cacheImages();`  \r\nAny 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.\r\n\r\n### *Attached to a Parent Container  **Coming Soon***\r\n`$('div#AwesomeContainer').cacheImages();`\r\nThis 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.\r\n  \r\n### Dynamically Adding an Element  \r\n`$('img').cacheImages({url: 'http://upload.wikimedia.org/wikipedia/commons/1/1d/Fishfinger1.jpg'};`  \r\nAllows 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.  \r\n\r\n### Manually caching an image  \r\n`cacheImagesFetchURL('http://upload.wikimedia.org/wikipedia/commons/9/92/Muraltmuur.jpg');`  \r\n  \r\nAttempts 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.  \r\n  \r\nThese images would later be automatically placed due to element or parent binding, or you could manually place them (see below).\r\n\r\n### Manually retrieving an image\r\n`cacheImagesOutput('http://upload.wikimedia.org/wikipedia/commons/9/92/Muraltmuur.jpg');`  \r\n  \r\nIf 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.\r\n\r\n\r\n# Credits and Thanks  \r\n* Based Heavily off of @doomhz plugin [jQueryImageCache](https://github.com/doomhz/jQuery-Image-Cache)\r\n* Utilizing base64 encoding from @mathias [Encoding XHR image data](http://jsperf.com/encoding-xhr-image-data/33)\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}