<< Back | Main Menu | FAQ | [?]

Image Preloader

Preload images with style (show animation loops)

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

?
1
2
3
4
5
6
7
8
<!-- 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):

?
1
2
3
4
5
6
7
8
<!-- 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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 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>
    


© TemplateAccess