Ajax非同期読み込みイメージ例分析-jsチュートリアル-php.cn

Ajax非同期読み込みイメージ例分析

亚连

リリース： 2018-05-24 10:48:58

オリジナル

2325 人が閲覧しました

この記事では、主に ajax による画像の非同期読み込みの方法を紹介し、サンプルの形式で、ajax 画像の非同期読み込みの原理と関連する実装テクニックを詳細に分析します。この記事では、ajax メソッドによる画像の非同期読み込みについて説明しています。参考までに、詳細は次のとおりです。

画像は一般的に比較的大きいため、基本的な Web ページが読み込まれた後に徐々に読み込まれます。全体の読み込みプロセスは非常に見苦しい、またはぼやけた状態から徐々に変化します。クリアするか、上から下に拡張します（もちろん、これらが優れた特殊効果であると考えることもできます）。画像の src 属性を定期的に変更することで画像が動的に置き換えられる場合、その結果生じるちらつきは、alt 属性ではさらに許容できないものになります。

「no」リフレッシュとして知られる一般的な AJAX テクノロジーに接続し、XMLHttpRequest オブジェクトを使用して非同期リクエストを開始します。画像が読み込まれた後、画像は「フォアグラウンド」HTML ページに動的に挿入されます。ニーズには応えられるはずですが、XMLHttpRequest オブジェクトが返すオブジェクトには、responseXML と responseText の 2 つの属性しかなく、前者は XML オブジェクトであり、後者はバイナリ形式で返されるものではないようです。写真に必要なデータ... 一歩下がって、responseText で画像のバイナリデータを取得できるとしても、それをフロントページに挿入するにはどうすればよいでしょうか。 img の src 属性を要求された URL に置き換えますか?

それを実行して、あなたのアイデアを検証するために画像スライドショーのコードを書いてください:

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

ログイン後にコピー

上記のコードは、1000 ミリ秒の時間間隔でループで写真 0.jpg から 10.jpg を表示します。効果は明らかで、ちらつきが発生します。確かに排除されました。では、どのように機能するのでしょうか?各画像の表示は 2 つのステップに分かれています:

XMLHttpRequest オブジェクトを使用してサーバーから画像を取得し、その画像をローカルのブラウザーのバッファーにキャッシュします。

ローカルブラウザのバッファから画像を取得して表示します。
写真を撮ってから2番目のステップで表示されるまでの時間が非常に短いため、ユーザーは基本的にちらつきを検出できません。上記のテクノロジーは、要求された画像がキャッシュ可能であるという前提に基づいていることがわかります。画像がキャッシュ可能でない場合、上記のコードは正しく機能しません。

コード自体に語らせて、上記のコードにいくつかの変更を加えます:

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

ログイン後にコピー

要求された画像を送信するために別の php スクリプトを作成します:

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

ログイン後にコピー

予想どおり、再びちらつきが発生します...

まだ必要があるようです別の方法を考えてください。密室で何かを構築してもうまくいきません。Google 先生に助けを求めましょう。苦労の甲斐あって、私はその結果にとても驚きました。IMG には樹脂製のインターフェイスが備わっていました。メガネが落ちてしまいます。「まあ、怖がらないで、怖がらないで、怖がらないで...」

何を待っていますか? もちろんコードが解決します:

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

ログイン後にコピー

「彼女は醜い女の子です！」言うことはありません画像がキャッシュできない状況:

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

ログイン後にコピー

以上、皆さんのためにまとめてみました。

AJAXリクエストキューの実装

ajaxを使用してフォームを非同期送信するいくつかの方法のまとめ

AJAXリクエストの配列の問題を解決する方法

以上がAjax非同期読み込みイメージ例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。