Image Preloader

Preload images with style (show animation loops)

Local: CSS/JS files (add code to <HEAD> section):


<!-- DC Image Preloader CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/image_preloader/css/dc_image_preloader.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js" ></script> <!-- jQuery Library (do not call twice on same page) -->
	
<!-- DC Image Preloader JS -->
<script type="text/javascript" src="dcodes/image_preloader/js/dc_image_preloader.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):


<!-- DC Image Preloader CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.dcodes.net/2/image_preloader/css/dc_image_preloader.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js" ></script> <!-- jQuery Library (do not call twice on same page) -->
	
<!-- DC Image Preloader JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/image_preloader/js/dc_image_preloader.js"></script>

Refresh to see image preloader in action!

View code:


<!-- DC Image Preloader Initialize -->
<script type="text/javascript">
$(function(){
	
	// single gallery
	$("#dc_preload_image").preloader();
	
	// multiple gallery exmaple
	// $("#dc_preload_image, #dc_preload_image2").preloader();	
	
	});
</script>

    <ul id="dc_preload_image">
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/BBCC66" /></a></p></li>
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/0099AA" /></a></p></li>
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/DD5544" /></a></p></li>
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/669933" /></a></p></li>
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/3399CC" /></a></p></li>
        <li><p><a href="#"><img src="http://cdn.dcodes.net/p/600x400/666666" /></a></p></li>
    </ul>