suchen

Heim >Web-Frontend >js-Tutorial >Beispielanalyse für das asynchrone Laden von Ajax-Bildern

Beispielanalyse für das asynchrone Laden von Ajax-Bildern

亚连
亚连Original
2018-05-24 10:48:582320Durchsuche

Dieser Artikel stellt hauptsächlich die Methode des asynchronen Ladens von Ajax-Bildern vor. Er analysiert die Prinzipien und zugehörigen Implementierungstechniken des asynchronen Ladens von Ajax-Bildern im Detail in Form von Beispielen

Die Beispiele dieses Artikels erklären die Ajax-Methode zum asynchronen Laden von Bildern. Ich teile es Ihnen als Referenz mit:

Bilder sind im Allgemeinen relativ groß, sodass sie nach dem Laden der Basiswebseite nach und nach geladen werden. Der gesamte Ladevorgang ist sehr unansehnlich wechselt allmählich von unscharf zu unscharf, oder von oben nach unten erweitert (man kann natürlich auch denken, dass es sich dabei um gute Spezialeffekte handelt). Wenn das Bild durch regelmäßiges Ändern des src-Attributs des img dynamisch ersetzt wird, ist das resultierende Flackern noch inakzeptabler. Dies kann mit dem alt-Attribut nicht angenehm sein.

Wenden Sie sich an die beliebte AJAX-Technologie, die als „No“ Refresh bekannt ist, und verwenden Sie das XMLHttpRequest-Objekt, um eine asynchrone Anfrage zu initiieren. Nachdem das Bild geladen wurde, wird es dynamisch in die „Vordergrund“-HTML-Seite eingefügt. Es sollte in der Lage sein, die Anforderungen zu erfüllen, aber das vom XMLHttpRequest-Objekt zurückgegebene Objekt hat nur zwei Attribute: ResponseXML und ResponseText. Ersteres ist ein XML-Objekt und letzteres ist der zurückgegebene Klartextinhalt. Es scheint, dass es keine Binärdatei gibt Für das Bild erforderliche Daten ... Gehen Sie einen Schritt zurück, selbst wenn ResponseText die Binärdaten des Bildes abruft. Wie können wir sie in die Startseite einfügen? Das src-Attribut von img durch die angeforderte URL ersetzen?

Machen Sie es einfach und schreiben Sie einen Bild-Diashow-Code, um Ihre Idee zu überprüfen: 

<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>

Der obige Code zeigt Bilder 0.jpg – 10.jpg in einer Schleife in einem Zeitintervall von 1000 Millisekunden an. Der Effekt ist deutlicher und das Flackern wird tatsächlich eliminiert. Wie funktioniert es also? Die Anzeige jedes Bildes ist in zwei Schritte unterteilt:
Verwenden Sie das XMLHttpRequest-Objekt, um das Bild vom Server abzurufen und das Bild im lokalen Browserpuffer zwischenzuspeichern.
Rufen Sie das Bild zur Anzeige aus dem lokalen Browserpuffer ab.
Da die Zeit von der Aufnahme des Bildes bis zur Anzeige im zweiten Schritt sehr kurz ist, können Nutzer grundsätzlich kein Flimmern feststellen. Es ist ersichtlich, dass die obige Technologie auf der Annahme basiert, dass das angeforderte Bild zwischenspeicherbar ist. Wenn das Bild nicht zwischenspeicherbar ist, funktioniert der obige Code dann nicht richtig?

Lassen Sie den Code für sich selbst sprechen und nehmen Sie einige Änderungen am obigen Code vor: 

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");

Schreiben Sie ein PHP-Skript, um das angeforderte Bild zu senden: 

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

Wie erwartet flackerte es schon wieder...

Es scheint, dass wir einen anderen Weg finden müssen, wenn wir hinter verschlossenen Türen arbeiten. Bitten Sie Herrn Google um Hilfe. Die harte Arbeit hat sich gelohnt und ich war überglücklich. Das Ergebnis hat mich immer noch überrascht. Ich kann nur froh sein, dass meine Brille aus Harz besteht Meine Brille fällt ab. „Hab keine Angst, hab keine Angst, hab keine Angst...“

Worauf wartest du? Natürlich hilft dir der Code:

<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>

„Sie ist ein hässliches Mädchen!“ Nichts zu sagen, nicht speicherbares Bild Situation: 

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

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Implementierung der AJAX-Anforderungswarteschlange

Eine Zusammenfassung mehrerer Methoden zum asynchronen Senden von Formularen mithilfe von Ajax

So lösen Sie das Problem von Arrays in AJAX-Anfragen

Das obige ist der detaillierte Inhalt vonBeispielanalyse für das asynchrone Laden von Ajax-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwendung des Parsings im Avalon-Frontend-ProjektNächster Artikel：Verwendung des Parsings im Avalon-Frontend-Projekt

In Verbindung stehende Artikel

Mehr sehen