Ajax asynchronous loading picture instance analysis _ajax related

The example in this article describes how Ajax asynchronously loads a picture. Share to everyone for your reference, specific as follows:

Pictures are generally larger, so they are loaded on the basic page after loading, the whole process of loading is very unsightly, or from blurring gradually become clear, or from the top down open (of course you can also think these are good effects). If it is through the timing of the IMG's SRC attribute to achieve dynamic replacement of the picture, the resulting flicker is more difficult to accept, this is not the use of ALT attribute can make people happy.

Contact the current more popular, known as "no" refreshing Ajax technology, using the XMLHttpRequest object to initiate an asynchronous request, the image loaded and then dynamically inserted into the "foreground" of the HTML page. should be able to meet the requirements, but the object returned by the XMLHttpRequest object has only two attributes Responsexml and ResponseText, the former XML object, which is the returned plain text content, and does not seem to have the binary data required for the picture ... If you take a step back, how can we insert it into the foreground page even if we can retrieve the binary data of the picture with ResponseText? Replace the SRC attribute of the IMG with the requested URL?

Do it, write an image slide code to verify your thoughts:

The above code in 1000 milliseconds for the time interval loop display picture 0.jpg-10.jpg, the effect is more obvious, does eliminate the flicker. So what's the principle? The display of each picture is divided into two steps:
Gets the image from the server with the XMLHttpRequest object, caches the image to the local browser buffer.
Gets the image to be displayed from the local browser buffer.
Because in the second step from taking the picture to display the time is very short, so the user basically does not perceive any flicker. Visible, the above technology is based on the requested image is cacheable assumption, if the image is not cached, is not the above code can not work properly?

or let the code speak, and make some changes to the above code:

function DisplayImage ()
{
 var url = './' + i + '. jpg ';
 var url = "./image.php?filename=" + i + ". jpg";
    Makeasyncrequest (URL, function (URL) {
        var div = document.getElementById ("image");
        var img = div.getelementsbytagname ("img");

Then write a PHP script to send the requested picture:

<?php
    Header ("Content-type:image/jpeg");
    Header ("Cache-control:no-cache");
    Echo file_get_contents ($_get["filename"]);
? >

Indeed, as expected, there are flashes ...

It seems to need another way, behind closed doors is not workable, to help Google this know-it-all Mr.! Kung Fu pays off, finally was I found, happy to rejoice, the result is still let me plunge glasses, img Unexpectedly have onload event callback interface, can only be thankful that their glasses are resin, "glasses off I'm not afraid, not afraid, not afraid ..."

What are you waiting for, of course, the code to serve:

"She is an ungly girl!" There's nothing to say. Non-cached image condition:

        i + +;
        Window.settimeout ("DisplayImage ();", 1000);
    }
 IMG.SRC = "./" + i + ". jpg";
 IMG.SRC = "./image.php?filename=" + i + ". jpg";
 }
    </script>
 
 

Read here, you should know which is crooked, which is the human right?

More interested readers of AJAX-related content can view this site: "A summary of Ajax usage in jquery," a summary of Ajax operating techniques in JavaScript, and a summary of PHP+AJAX techniques and applications.

I hope this article will help you with Ajax programming.