#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    37
    Rep Power
    2

    How to display loading image


    I have 3 working files :
    index.html :
    html Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
     <head>
     <script src="urltojquery.js"></script>
     <script type="text/javascript" src="preview.js"></script>
     <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Test Code Preview</title>
     </head>
     <body>
     <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
     <br /><input type="text" id="language" name="language"/>
     <br /><input type="button" onclick="process()" value="Preview"/>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     <div id="previewcode"></div>
     </body>
     </html>


    preview.php :
    PHP Code:
     <?php
        
    if(!empty($_POST['pastecode']) && !empty($_POST['language']))
        {
            
    $code=$_POST['pasteode'];
            
    $language=$_POST['language'];
            include(
    "geshi/geshi.php");
            
    $path     '';
            
    $geshi    = new GeSHi($code$language$path);
            
    $geshi->set_overall_style('background-color: #ffffee;'true);
            
    $out $geshi->parse_code();
            echo 
    $out;
        }
        else
        {
            echo 
    "<span style=\"color: red\">Nothing to display</span>";
        }
    ?>
    preview.js :
    javascript Code:
    function process(){
        pastecodeVal = $("#pastecode").val();
        languageVal = $("#language").val();
        $("#previewcode").html("Fetching preview..."+"<hr />")
     
        $.post("preview.php", { pastecode: pastecodeVal, language: languageVal },
                 function(data) {
     
                    $("#previewcode").html(data+"<hr />");
     
              });
    }


    As you can see, when the button is pressed, and preview.php os executing, the message "Fetching preview..." is shown.
    Instead of that, I'd like to display a loading image when preview.php is getting executed. I've got an image loader.gif in the same folder as the three files. How to do it?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Originally Posted by The Alchemist
    As you can see, when the button is pressed, and preview.php os executing, the message "Fetching preview..." is shown.
    Instead of that, I'd like to display a loading image when preview.php is getting executed. I've got an image loader.gif in the same folder as the three files. How to do it?
    You just need to change the content of the jQuery html() API; like so:
    Code:
    function process(){
        pastecodeVal = $("#pastecode").val();
        languageVal = $("#language").val();
        $("#previewcode").html("<img src=\"loader.gif\"/>"+"<hr />")
    
        $.post("preview.php", { pastecode: pastecodeVal, language: languageVal },
                 function(data) {
    
                    $("#previewcode").html(data+"<hr />");
    
              });
    }

    Comments on this post

    • The Alchemist agrees : thanks for helping
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    37
    Rep Power
    2
    Originally Posted by web_loone08
    You just need to change the content of the jQuery html() API; like so:
    Code:
    function process(){
        pastecodeVal = $("#pastecode").val();
        languageVal = $("#language").val();
        $("#previewcode").html("<img src=\"loader.gif\"/>"+"<hr />")
    
        $.post("preview.php", { pastecode: pastecodeVal, language: languageVal },
                 function(data) {
    
                    $("#previewcode").html(data+"<hr />");
    
              });
    }
    OMG!!!! Its this simple??? Thanks!!! Its working fine!!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    6
    Rep Power
    0
    Hi there
    This topic really helps me a lot.But i want to know is there any easier way to display the loading image?I found that to load image or display image using code is difficult.Thanks .
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    37
    Rep Power
    2
    Originally Posted by Abigail111
    Hi there
    This topic really helps me a lot.But i want to know is there any easier way to display the loading image?I found that to load image or display image using code is difficult.Thanks .
    I dont think there's an easier approach.
    You can also change the visibility of images using jQuery by changing the CSS of the images.
    This method is easy enough.

IMN logo majestic logo threadwatch logo seochat tools logo