10 jQuery Image Cache Plugins and Scripts

Sam Deering
Share

To avoid loading delays when loading images for the first time it makes sense to preload and cache them. Below are some of the jQuery Image Cache/Preloading plugins to help you load and detect when an images have loaded. Enjoy!

Related Posts:

1. jquery-cacheimage

A simple jQuery plugin for pre-caching images. The plugin can be used to eliminate flashes of unstyled content (FOUC) and improve perceived page load time. Callbacks for load, error and abort events are provided.


jquery-cacheimage

Source + Demo

2. jQuery Image Cache Plugin – Cache Images in Browser’s Local Storage

Features:
> Enough quota (usually 5MB, depends on the browser)
> Data is shared between tabs and windows (Session Storage doesn’t do this)
> Increased security (no cross domain data sharing)
> Easy to use (key/value pairs)


jQuery Image Cache

Source
Demo

3. jquery add image to browser cache

This is how you might preloading images using jQuery to add the images to browser cache (as part of a DOM div element which is hidden).


jquery add image to browser cache

Source + Demo

4. jQuery Image preloader with callback

Image preloader with a callback mechanism to allow notification of when the images have finished loading.


jQuery Image preloader with callback

Source + Demo

5. Caching Images with JavaScript and HTML5 progress Bars

This loader tells the user how long it will take for the page to load and display.


Caching Images with JavaScript and HTML5 progress Bars

Source
Demo

6. Preloading Images with jQuery

The script iterates through each rule in each stylesheet attached to the current page and if the rule’s value contains an image URL, it loads the image, thus ensuring it’s available in the cache when used in the document.


Preloading Images with jQuery

Source + Demo

7. jQuery Preload CSS Images

This Script is a little jQuery plugin that caches all images referenced in linked/imported CSS files (it iterates through each rule in each stylesheet attached and if the rule’s value contains an image URL, it loads the image, thus ensuring it’s available in the cache when used in the document.


jQuery Preload CSS Images

Source + Demo

8. The easiest way to preload images with jQuery

Why use of long scripts and jQuery plugins to achieve what can be done with as little as one line of code.


easiest way to preload images with jQuery

Source + Demo

9. jQuery Image Preload Plugin

The jQuery imgpreload plugin allows you to preload images before and/or after the dom is loaded.


jQuery Image Preload Plugin

Source + Demo

10. jPreLoader

Create a Loading Screen to preload images and content for website using jQuery. Splash Screen is showing during loading process.


jPreLoader

Source
Demo