Skip to main content

10 jQuery Image Cache Plugins and Scripts

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!