Speed up development with full-stack environments for every branch.

Learn More

How to add jQuery Image Preloader

2642 Runs 5826 Views 2608 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How to add jQuery Image Preloader</title>
    <link rel="stylesheet" href="css/preloader.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.preloader.js"></script>
    <script type="text/javascript">
    
    /*
      jQuery document ready
    */
    
    $(function()
    {
    	/*
    		get the gallery container div
    		and assign our preloader plugin to it.
    	*/
    	$("#gallery").preloader();	
    });
    </script>
    
    </head>
    
    <body>
    
    <div id="container">
        <h2>jQuery Preloader - Load images with style</h2>
          
        <ul id="gallery" class="clearfix">
            <li><p><a href="#"><img src="http://placehold.it/600x400"></a></p></li>
            <li><p><a href="#"><img src="http://placehold.it/600x400" /></a></p> </li>
            <li><p><a href="#"><img src="http://placehold.it/600x400" /></a></p> </li>
            <li><p><a href="#"><img src="http://placehold.it/600x400" /></a></p></li>
        </ul>
    	
    </div>
    
    </body>
    </html>
    
    Please login/signup to get access to the terminal.

    Your session has timed out.

    Dismiss (the page may not function properly).