jQuery Picture Preload Plugin: Sensible Preloader
Sensible Preloader is a small jQuery picture preloading plugin that helps you preload all of the required pictures. Sensible preloader plugin takes an array of photos and notifies through “oneachimageload” on every image load, and as soon as all the photographs are loaded “onloadall” callback capabilities. Each of the “oneachimageload” and “onloadall” skills are handed as parameters to Sensible Preloader initializer operate.
Sensible Preloader parameters
- pictures: an array of photos to be preloaded
- oneachimageload: callback operate to be referred to as on every image load
- onloadall: callback work to be called when all the photographs are loaded
Utilizing Sensible Preloader
In your HTML file add the next within the head part.
- Add a reference to newest jQuery script
- Add a reference to smartpreload.js file
Now insert the next code to your HTML file’s head part.
<script sort="textual content/javascript">
$(doc).prepared(operate() :
$(doc).smartpreload();
operate onimageload(src)
operate onallimagesloaded()
});
</script>
Right here is the entire supply system for an illustration of picture preloading. On this demo we’re loading twelve images, initially when the web page masses it shows an overlay and the placeholders for pictures and on every picture load the placeholder is changed with the precise picture, as soon as all the photographs are loaded the overlay can be eliminated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sensible Preload jQuery Plugin</title>
<script src="jquery-1.four.four.min.js" sort="textual content/javascript"></script>
<script src="smartpreload.js" sort="textual content/javascript"></script>
<script sort="textual content/javascript">
var counter = zero;
$(doc).prepared(operate() );
</script>
<type sort="textual content/css">
physique
#demo
#demo #wrapper
#demo div.container
#demo div img.regular
#demo div img.loading
#demo #preview
#overlay
#overlay img
#overlay div p
.clear
</type>
</head>
<physique>
<div id="overlay">
<div type="text-align:left;margin:auto;width:620px;padding-top:20px;">
<p>
This demo exhibits the usage of preload pugin, it makes use of following callback capabilities</p>
<p>
1) oneachimageload</p>
<p>
2) onloadall</p>
<p>
See when every picture is loaded the picture place holder shows the picture.
</p>
<p>
Additionally when all the photographs are loaded overlay is eliminated through "onloadall" callback
operate.</p>
</div>
</div>
<div id="demo">
<div id="wrapper">
<div class="container">
<img id="1" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="2" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="three" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="four" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="5" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="6" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="7" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="eight" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="9" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="10" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="11" />
<div class="clear">
</div>
</div>
<div class="container">
<img id="12" />
<div class="clear">
</div>
</div>
</div>
</div>
</physique>
</html>
Sensible Preloader Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Nice script. But how can i stop the script from displaying a random image when i reload the page?
Having some trouble getting this to work in IE7..works beautifully in other browsers though. Any suggestions?
Hi Andrew!
Thanks for using my scripts. As far as IE7 is concerned i’ve tested the script in IE7 using IE Tester its working for me. Can you please tell me more specifically what’s going wrong ?
can you add a support for loading images from xml file to any target element
Thanks for the plugin. Can it be implemented with background images in css but i don’t know my way around jquery. Any solution for that?
Well martthews you dont need to do anything special, images are images whether they are used in background in they are used as element, you simply need to pass the array of images that you want to preload. For example if your css contains a class like
.myclass
{
background-image:url(‘http://www.mysite.com/images/bg.jpg’);
}
you just need to pass your image path to preload plugin, it will do the rest for you 🙂 Actually it is the first request that is served from the actual location, subsequent request are served from browser’s cache.
Lightweight and easy plugable! nice plugin.