집 > 기사 > 웹 프론트엔드 > Ajax 비동기 로딩 이미지 예시 분석

Ajax 비동기 로딩 이미지 예시 분석

亚连원래의: 2018-05-24 10:48:582255검색

이 글은 주로 Ajax에 의한 이미지 비동기 로딩 방법을 소개하고 있으며, Ajax 이미지 비동기 로딩의 원리와 관련 구현 기술을 예제 형식으로 자세히 분석하고 있습니다. 기사에서는 ajax 방식으로 이미지를 비동기적으로 로드하는 방법을 설명합니다. 참고를 위해 자세한 내용을 공유합니다.

사진은 일반적으로 상대적으로 크기 때문에 기본 웹페이지가 로드된 후 점차적으로 로드됩니다. 전체 로딩 과정이 매우 보기 흉하거나 흐릿하게 변합니다. 지우거나 위에서 아래로 확장합니다(물론 이것이 좋은 특수 효과라고 생각할 수도 있습니다). img의 src 속성을 정기적으로 변경하여 이미지를 동적으로 교체하면 결과적으로 깜박이는 현상이 훨씬 더 용납되지 않습니다. 이는 alt 속성으로는 기분 좋은 일이 아닙니다.

"새로 고침 없음"으로 알려져 있으며 XMLHttpRequest 개체를 사용하여 비동기 요청을 시작하는 널리 사용되는 AJAX 기술에 문의하세요. 이미지가 로드된 후 "전경" HTML 페이지에 동적으로 삽입됩니다. 요구사항을 충족할 수 있어야 하는데 XMLHttpRequest 객체가 반환하는 객체에는 responseXML과 responseText라는 두 가지 속성만 있고, 후자는 반환된 일반 텍스트 콘텐츠인 것 같습니다. 사진에 필요한 데이터... 한발 물러서서 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의 사진을 루프로 표시합니다. 효과는 분명하고 깜박임도 있습니다. 실제로 제거되었습니다. 그럼 어떻게 작동하나요? 각 이미지의 표시는 두 단계로 나뉩니다.

XMLHttpRequest 개체를 사용하여 서버에서 이미지를 가져오고 해당 이미지를 로컬 브라우저 버퍼에 캐시합니다.

표시할 로컬 브라우저 버퍼에서 이미지를 가져옵니다.
사진을 촬영한 후 두 번째 단계에서 표시하기까지의 시간이 매우 짧기 때문에 사용자는 기본적으로 깜박임을 감지할 수 없습니다. 위의 기술은 요청한 이미지를 캐시할 수 있다는 가정을 바탕으로 한 것이라고 볼 수 있습니다. 이미지를 캐시할 수 없다면 위의 코드가 제대로 작동하지 않을까요?

코드가 스스로 말하도록 하고 위 코드를 일부 변경합니다:

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 비동기 로딩 이미지 예시 분석

관련 기사