Maison > Article > interface Web > Analyse d'un exemple d'image de chargement asynchrone Ajax

Analyse d'un exemple d'image de chargement asynchrone Ajax

亚连original: 2018-05-24 10:48:582250parcourir

Cet article présente principalement la méthode de chargement asynchrone des images ajax. Il analyse en détail les principes et les techniques de mise en œuvre associées du chargement asynchrone des images ajax sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit

<.>Les exemples de cet article expliquent la méthode Ajax pour charger des images de manière asynchrone. Je le partage avec vous pour votre référence. Les détails sont les suivants :

Les images sont généralement relativement volumineuses, elles sont donc chargées progressivement après le chargement de la page Web de base. L'ensemble du processus de chargement est très inesthétique, ou plutôt. passe progressivement du flou au flou, ou s'étend de haut en bas (bien sûr, vous pouvez aussi penser que ce sont de bons effets spéciaux). Si le remplacement dynamique de l'image est obtenu en modifiant régulièrement l'attribut src de l'img, le scintillement qui en résultera sera encore plus inacceptable. Ce n'est pas quelque chose qui peut être agréable avec l'attribut alt.

Contactez la technologie AJAX populaire, connue sous le nom de « non » rafraîchissement, et utilisez l'objet XMLHttpRequest pour lancer une requête asynchrone. Une fois l'image chargée, elle est insérée dynamiquement dans la page HTML « de premier plan ». Il devrait être capable de répondre aux besoins, mais l'objet renvoyé par l'objet XMLHttpRequest n'a que deux attributs, ResponseXML et ResponseText, le premier est un objet XML et le second est le contenu en texte brut renvoyé. Il semble qu'il n'y ait pas de binaire. données nécessaires à l'image... En prenant du recul, même si cela peut être utilisé, responseText récupère les données binaires de l'image, comment peut-on les insérer en première page ? Remplacer l'attribut src de img par l'url demandée ?

Faites-le et écrivez un code de diaporama d'images pour vérifier votre idée :

<html>
    <head>
        <title>Image Slide</title>
        <script>
function makeAsyncRequest(url, callback)
{
    var httpRequest;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType) {
            httpRequest.overrideMimeType(&#39;text/xml&#39;);
        }
    } else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4
                && httpRequest.status == 200)
            callback(url);
    };
    httpRequest.open(&#39;GET&#39;, url, true);
    httpRequest.send(&#39;&#39;);
}
var i = 0;
var max_i = 10;
function displayImage()
{
    var url = "./" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var p = document.getElementById("image");
        var img = p.getElementsByTagName("img");
        if (img.length == 0) {
            img = document.createElement("img");
            while (p.childNodes.length > 0)
                p.removeChild(p.childNodes[0]);
            p.appendChild(img);
        } else
            img = img.item(0);
        img.src = url;
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    });
}
        </script>
    </head>
    <body onload="displayImage();">
        <p id="image">
        </p>
    </body>
</html>

Le code ci-dessus boucle pour afficher les images 0.jpg - 10 à des intervalles de 1000 millisecondes jpg, le. l'effet est plus évident et le scintillement est effectivement éliminé. Alors comment ça marche ? L'affichage de chaque image est divisé en deux étapes :

Utilisez l'objet XMLHttpRequest pour obtenir l'image du serveur, et mettez l'image en cache dans le tampon du navigateur local.
Récupérez l'image à partir du tampon du navigateur local pour l'afficher.
Étant donné que le temps entre la prise de la photo et son affichage dans la deuxième étape est très court, les utilisateurs ne peuvent pratiquement détecter aucun scintillement. On peut voir que la technologie ci-dessus est basée sur l'hypothèse que l'image demandée peut être mise en cache. Si l'image ne peut pas être mise en cache, le code ci-dessus ne fonctionnera-t-il pas correctement ?

Laissez le code parler de lui-même et apportez quelques modifications au code ci-dessus :

function displayImage()
{
 var url = "./" + i + ".jpg";
 var url = "./image.php?filename=" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var p = document.getElementById("image");
        var img = p.getElementsByTagName("img");

Écrivez un script php pour transmettre l'image demandée :

<?php
    header("Content-Type: image/jpeg");
    header("Cache-Control: no-cache");
    echo file_get_contents($_GET["filename"]);
?>

Comme attendu, le scintillement est réapparu...

Il semble que nous devions trouver un autre moyen. Travailler à huis clos ne fonctionnera pas. Veuillez demander de l'aide à M. Google ! Le travail acharné a porté ses fruits et je l'ai finalement trouvé. J'étais ravi. Le résultat m'a quand même surpris. IMG a en fait une interface de rappel d'événement lors du chargement. Je ne peux qu'être heureux que mes lunettes soient en résine. "Je n'ai pas peur si. mes lunettes tombent." Bon, n'aie pas peur, n'aie pas peur, n'aie pas peur..."

Qu'est-ce que tu attends ? Bien sûr que le code te servira :

<html>
    <head>
        <title>Image Slide</title>
        <script>
var i = 0;
var max_i = 10;
function displayImage()
{
    var img = document.createElement("img");
    img.onload = function () {
        var p = document.getElementById("image");
        while (p.childNodes.length > 0)
            p.removeChild(p.childNodes[0]);
        p.appendChild(img);
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    }
    img.src = "./" + i + ".jpg";
}
        </script>
    </head>
    <body onload="displayImage();">
        <p id="image">
        </p>
    </body>
</html>

"C'est une fille moche !" Rien à dire, non cacheable La situation des images :

        i ++;
        window.setTimeout("displayImage();", 1000);
    }
 img.src = "./" + i + ".jpg";
 img.src = "./image.php?filename=" + i + ".jpg";
 }
    </script>
</head>

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. être utile à tout le monde à l’avenir.

Articles Liés

Voir plus