Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-24 10:48:58
original
2274 Les gens l'ont consulté

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>
Copier après la connexion
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");
Copier après la connexion
É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"]);
?>
Copier après la connexion
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>
Copier après la connexion
"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>
Copier après la connexion
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 connexes :

Implémentation de la file d'attente de requêtes AJAX

Un résumé de plusieurs méthodes de soumission de formulaires de manière asynchrone à l'aide d'Ajax

Comment résoudre le problème des tableaux dans les requêtes AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal