loading images with xmlhttp

mouro · 05-15-2012, 03:45 PM

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();
        }

devnull69 · 05-15-2012, 06:08 PM

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