Realm of Zod
Programming and Technology
-
jQuery Image Loader
This is a quick and easy to use jquery plugin for asynchronously loading images on a page.
Download:
jquery.imageLoader-1.0.zip (774.9 KiB)Usage:
-
-
<html>
-
<head>
-
<script type="text/javascript" src="js/jquery.js"></script>
-
<script type="text/javascript" src="js/jquery.imageLoader.js"></script>
-
<script type="text/javascript">
-
jQuery(‘ul.dynamic-images li’).loadImages();
-
</script>
-
</head>
-
<body>
-
<ul class="dynamic-images">
-
<li src="img/image1.jpg"></li>
-
<li src="img/image2.jpg"></li>
-
<li src="img/image3.jpg"></li>
-
</ul>
-
</body>
-
</html>
-
This is the simplest usage. The url of the image you want to load is assigned to the ’src’ attribute of the containing element. Each element will have an img tag dynamically injected, showing a placeholder image until the image has sucessfully loaded. On failure, a fallback image will be shown, these images are configurable.
Callbacks:
-
-
<ul class="dynamic-images">
-
<li src="img/image1.jpg" onload="img = arguments[0]; img.alt = ‘Test image 1′"></li>
-
<li src="img/image2.jpg" onload="img = arguments[0]; img.alt = ‘Test image 2′"></li>
-
<li src="img/image3.jpg" onload="img = arguments[0]; img.alt = ‘Test image 3′"></li>
-
</ul>
-
Callbacks can be defined per image.
-
-
<script type="text/javascript">
-
jQuery(‘ul.dynamic-images li’).loadImages({
-
FailImage: ‘img/loadError.gif’
-
}, function(){
-
var img = jQuery(arguments[0]);
-
img.attr(‘width’, 100);
-
img.attr(‘height’, 100);
-
});
-
</script>
-
Callbacks can also be defined globally so they will be called for every image loaded.
Options:
A custom options hash can be passed to loadImages() to override the defaults.
Option Default Value Description LoadingImage img/image-loader.gif Indicates the placeholder image to be shown while the real image is loading. It’s handy to show spinners and throbbers. FailImage img/image-loader-error.jpg The image to show if the real image cannot be loaded for whatever reason. -
Sponsored Links
