Ajax asynchronously loads image instance analysis,

Ajax asynchronously loads image instance analysis,

This document describes how to asynchronously load images using ajax. We will share this with you for your reference. The details are as follows:

Images are usually relatively large, so they are gradually loaded after the basic web page is loaded. The entire loading process is very unsightly, or gradually becomes clearer from fuzzy, or expand from top to bottom (of course, you can think these are all good special effects ). If the image is changed dynamically by changing the src attribute of the img at regular intervals, the flickering will make it more unacceptable. This is not a pleasant result if the alt attribute is used.

The popular AJAX technology, known as "NONE" Refresh, uses the XMLHttpRequest object to initiate an asynchronous request. After the image is loaded, it is dynamically inserted to the HTML page of the "foreground. The returned objects of the XMLHttpRequest object only have two attributes: responseXML and responseText. The former is an XML object, and the latter is the returned plain text content, it seems that there is no binary data required by the image... step back: Even if responseText can be used to retrieve the binary data of an image, how can we insert it into the front-end page? Change the src attribute of img to the requested url?

Just do what you need and write a code for the image slide to verify your ideas:

The image 0.jpg-10.jpg is displayed cyclically at intervals of seconds using the above Code. The effect is obvious and the flashing is indeed eliminated. How does it work? Each image is displayed in two steps:
The XMLHttpRequest object is used to obtain the image from the server and cache the image to the local browser buffer.
Obtain the image from the local browser buffer for display.
Because the second step takes a short period of time from image retrieval to display, the user basically cannot see any flashes. It can be seen that the above technology is based on the assumption that the requested image is cacheable. If the image is not cacheable, isn't the above Code working properly?
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");
Write another php script to send the requested image:
<?php    header("Content-Type: image/jpeg");    header("Cache-Control: no-cache");    echo file_get_contents($_GET["filename"]);?>
As expected, another flash appeared...
It seems that there is another way to do it. It is impossible to build a car by closed doors. Ask google, Mr. Belden! I was so happy that I was finally found. I was so surprised that I was surprised. img had an onload event callback interface and I was glad that my glasses were resin, "I'm not afraid of glasses, not afraid of glasses..."
What are you waiting for? Of course the code is waiting:
"She is an unugly girl! "There is nothing to say about images that cannot be cached:
        i ++;        window.setTimeout("displayImage();", 1000);    } img.src = "./" + i + ".jpg"; img.src = "./image.php?filename=" + i + ".jpg"; }    </script>
Reading this, you should know which is the mean and which is the mean thing?