ajax 비동기 로 딩 이미지 인 스 턴 스 분석

6143 단어 ajax비동기 로드
본 고의 실례 는 aax 비동기 로 그림 을 불 러 오 는 방법 을 설명 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
사진 은 일반적으로 비교적 크기 때문에 그들 은 모두 기본 홈 페이지 에 불 러 온 후에 점차적으로 불 러 온 것 이다.전체 불 러 오 는 과정 이 매우 보기 싫 거나 모호 함 에서 점점 뚜렷 해 지 거나 위 에서 아래로 확대 되 었 다(물론 이런 것들 이 모두 좋 은 효과 라 고 생각 할 수 있다).만약 에 정기 적 으로 img 의 src 속성 을 바 꾸 어 그림 의 동적 변 화 를 실현 한다 면 이 로 인해 발생 하 는 반 짝 임 은 더욱 받 아들 이기 어렵 습 니 다.이것 은 alt 속성 으로 사람 을 즐겁게 하 는 것 이 아 닙 니 다.
현재 인기 있 는'무'리 셋 이 라 고 불 리 는 AJAX 기술 과 연락 하여 XML HttpRequest 대상 을 이용 하여 비동기 요청 을 하고 이미지 로드 가 완료 되면'프론트 데스크 톱'의 HTML 페이지 에 동적 으로 삽입 합 니 다.수 요 를 만족 시 킬 수 있 을 것 입 니 다.그러나 XML HttpRequest 대상 이 돌아 오 는 대상 은 두 개의 속성 responseXML 과 responseText 뿐 입 니 다.전 자 는 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('text/xml');
        }
    } 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('GET', url, true);
    httpRequest.send('');
}
var i = 0;
var max_i = 10;
function displayImage()
{
    var url = "./" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var div = document.getElementById("image");
        var img = div.getElementsByTagName("img");
        if (img.length == 0) {
            img = document.createElement("img");
            while (div.childNodes.length > 0)
                div.removeChild(div.childNodes[0]);
            div.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();">
        <div id="image">
        </div>
    </body>
</html>
이상 코드 는 1000 밀리초 간격 으로 그림 0.jpg-10.jpg 를 반복 적 으로 표시 합 니 다.효과 가 뚜렷 하고 반 짝 임 이 확실히 제거 되 었 습 니 다.그럼 원 리 는 요?모든 그림 의 표 시 는 두 단계 로 나 뉜 다.
XML HttpRequest 대상 으로 서버 에서 그림 을 가 져 오고 로 컬 브 라 우 저 버퍼 로 그림 을 캐 시 합 니 다.
로 컬 브 라 우 저 버퍼 에서 그림 을 가 져 와 표시 합 니 다.
두 번 째 단계 에서 그림 을 가 져 오 는 시간 이 짧 기 때문에 사용 자 는 기본적으로 어떤 반 짝 임 도 감지 하지 못 한다.이 를 통 해 알 수 있 듯 이 상기 기술 은 요청 한 이미지 가 캐 시 가능 하 다 는 가설 을 바탕 으로 이미지 가 캐 시 되 지 않 으 면 상기 코드 가 정상적으로 작 동 하지 않 는 것 이 아 닙 니까?
아니면 코드 로 말 을 하 게 하고 상기 코드 를 변경 하 십시오.

function displayImage()
{
 var url = "./" + i + ".jpg";
 var url = "./image.php?filename=" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var div = document.getElementById("image");
        var img = div.getElementsByTagName("img");
요청 한 그림 을 전송 하기 위해 php 스 크 립 트 를 하나 더 쓰 십시오:

<?php
    header("Content-Type: image/jpeg");
    header("Cache-Control: no-cache");
    echo file_get_contents($_GET["filename"]);
?>
과연 예상대로 또 반 짝 이 는 군..
다른 방법 이 필요 할 것 같 습 니 다.문 을 닫 고 차 를 만 드 는 것 은 통 하지 않 습 니 다.구 글 이라는 척척척박사 에 게 도움 을 청 하 세 요!쿵 푸 는 마음 이 있 는 사람 을 저 버 리 지 않 고 드디어 제 가 찾 았 습 니 다.기 쁘 고 기 쁩 니 다.결국은 저 를 크게 놀 라 게 했 습 니 다.img 은 onload 사건 의 인 터 페 이 스 를 바 꾸 었 습 니 다.제 안경 이 수지 인 것 을 다행 으로 생각 할 수 밖 에 없 었 습 니 다."안경 이 떨 어 지면 저 는 두 렵 지 않 습 니 다.두 렵 지 않 습 니 다."
뭘 더 기 다 려?당연히 코드 가 모 셔 야 지.

<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 div = document.getElementById("image");
        while (div.childNodes.length > 0)
            div.removeChild(div.childNodes[0]);
        div.appendChild(img);
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    }
    img.src = "./" + i + ".jpg";
}
        </script>
    </head>
    <body onload="displayImage();">
        <div id="image">
        </div>
    </body>
</html>
"She is an ungly girl!"할 말 이 없습니다.캐 시 할 수 없 는 그림 의 경우:

        i ++;
        window.setTimeout("displayImage();", 1000);
    }
 img.src = "./" + i + ".jpg";
 img.src = "./image.php?filename=" + i + ".jpg";
 }
    </script>
</head>
여기까지 읽 으 면 어느 것 이 그릇 된 길 인지,어느 것 이 인간 의 정도 인지 알 겠 지?
더 많은 Ajax 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있 습 니 다.,과 을 볼 수 있 습 니 다.
본 논문 에서 말 한 것 이 여러분 의 ajax 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
pygame 를 사용 하여 쓰레기 분류 게임 기능 실현(이미 학교 급 2 등 상 을 받 았 습 니 다)
자바 파충류 기술 프레임 워 크 의 Heritrix 프레임 워 크 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage