jQuery Plugin To Display Fallback Image For Broken Images - smartImage
File Size: | 23.6 KB |
---|---|
Views Total: | 410 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A smart and user-friendly image loading plugin which displays a placeholder image in case the current image fails to load and then replaces the placeholder with a fallback image after a specified number of attempts to re-load the original image.
How to use it:
1. Download and load the jQuery smartImage plugin's script after jQuery library as usual.
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.smartImage.min.js"></script>
2. Create an img
tag with empty src
attribute on the webpage.
<img id="myImage" src="">
3. Call the function and specify the paths to original, placeholder and fallback images.
$('#myImage').smartImage({ "load-image": 'original.jpg', "place-holder": 'loading.gif', "error-image": 'error.jpg' });
4. Specify the number of attempts to re-load the original image.
$('#myImage').smartImage({ "load-image": 'original.jpg', "place-holder": 'loading.gif', "error-image": 'error.jpg', "retry-max": 2 });
5. Specify the delay for each retry.
$('#myImage').smartImage({ "load-image": 'original.jpg', "place-holder": 'loading.gif', "error-image": 'error.jpg', "retry-max": 2, "retry-delay": 3000 });
This awesome jQuery plugin is developed by essaricy. For more Advanced Usages, please check the demo page or visit the official website.