Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    loading images with xmlhttp

    This code works, this code loads on a div different images based on a param (I have several buttons each one call sendToK(param) with different param values)

    outputContentPage basically return an image, depending on param passed

    My problem is:
    it takes a second time, maybe two seconds, from POINT1 and POINT2 (you find them on javascript code). In the meanwhile the div is empty, I mean it does not contain previous image and not yet the next.
    Why?
    My goal is to have no void transiction betweenan image and the other.

    Thanks!


    Code:
    <div style="background-color:blue">
            <table>
                <tr>
                    <td>                    
                        <input type="button" id="ButtonOpen" onclick="sendToK('Model Open \'cubo.kmo\'')" title="OpenModel" value="OpenModel" />                    
                    </td>
                </tr>
             </table>
        </div>
    
        
        <div style="background-color:green" id="ImgResult">     
        </div>
    and the javascript
    Code:
    	function sendToK(comandString) {
                var xmlhttp;
                if (comandString == "") {
                    document.getElementById("ImgResult").innerHTML = "";
                    return;
                }
    
    
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    //alert('new XMLHttpRequest ');
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    //alert('new ActiveXObject');
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
    
    
                xmlhttp.onreadystatechange = function () {
                    //alert('onreadystatechange');
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        //alert('onreadystatechange');
                        var output2 = xmlhttp.responseText;
    
    
                        //alert("comandString " + comandString);
    
    //POINT 1
    
    		    document.getElementById("ImgResult").innerHTML = output2;
    //POINT 2
    
                    }
                    else {                  
                      document.getElementById("ImgResult").innerHTML = "<img src='/img/notready.jpg' />";
                    }
                    
    
    
                }
    
    
    
                //xmlhttp.open("GET", "outputContentPage.aspx?c=" + comandString, true);
                xmlhttp.open("POST", "outputContentPage.aspx?c=" + comandString, true);
                xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xmlhttp.send();
            }

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    With this line
    Code:
    document.getElementById("ImgResult").innerHTML = output2;
    You are replacing the HTML markup of the current image with the HTML markup of the new image. But this new image has most probably not yet been loaded by the browser. So it will start loading it only after the previous image has already been removed.

    If you search for "image preloading" you will find a lot of potential solutions for your problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •