|
1 | | -jQuery-image-cache |
| 1 | +jQuery Cache Image plugin |
2 | 2 | ================== |
3 | 3 |
|
4 | | -Plugin for jQuery that allows for the easy caching of image files in the browsers localstorage. |
| 4 | +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. |
| 5 | + |
| 6 | +## Using the Plugin |
| 7 | +The 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. |
| 8 | + |
| 9 | +### Attaching to an Element |
| 10 | +`$('img#AnElement').cacheImage();` |
| 11 | +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. |
| 12 | + |
| 13 | +### Attached to a Parent Container |
| 14 | +`$('div#AwesomeContainer').cacheImage();` |
| 15 | +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. |
| 16 | + |
| 17 | +### Manually caching an image |
| 18 | +`cacheImageFetchURL('http://yourenota.plumber/wear-a-belt.png');` |
| 19 | +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 earily you ensure that they would be available along with the other data. |
| 20 | + |
| 21 | +These images would later be automatically placed due to element or parent binding, or you could manually place them (see below). |
| 22 | + |
| 23 | +## Configuring the plugin |
| 24 | +There are no required configuration steps for the plugin to work (aside from actually calling the function at least once). You are able to |
| 25 | + |
| 26 | +## Future Goals |
| 27 | +I would love to see this also apply to background images. Currently you can manually cache the image, and the manually display the image into your css. It would look like the following. |
| 28 | + |
| 29 | +1. Caching the Image if used before hand |
| 30 | +1. Use the place image function |
| 31 | + |
| 32 | +``` |
| 33 | +cacheImageFetchURL('http://lookatmy.diamonds/mega-stone.jpg'); // Use to pre-cache earlier |
| 34 | +cacheImageDisplay('http://lookatmy.diamonds/mega-stone.jpg'); // Use to insert the base64 encoded image string |
| 35 | +``` |
| 36 | + |
| 37 | +# Credits and Thanks |
| 38 | + |
| 39 | +* Based Heavily off of @doomhz plugin [jQueryImageCache](https://github.com/doomhz/jQuery-Image-Cache) |
| 40 | +* Utilizing base64 encoding from @mathias [Encoding XHR image data](http://jsperf.com/encoding-xhr-image-data/33) |
0 commit comments