img 태그가 서버에 비동기 요청을 수행합니까?

Question

페이지를 렌더링 후 나는 img 태그의 SRC는 자바 스크립트 등으로 변경하는 경우 :

function changeImage(){ 
    img.src = 'getImage?imgId=232132'; //getImage is calling doGet() Method of Servlet with response content type "image/jpeg" 
} 

이 비동기 호출 및로드 이미지 여부를 확인입니까?

Answer 1

예, 호출이 비동기입니다 (이미지가 캐시에 있기 때문에 실제로 멀리 떨어진 호출이 아닌 경우는 예외입니다.이 경우 이미지는 스크립트의 다음 행이 실행되기 전에로드됩니다).

당신이 그것을 완료 때 통지 할 경우

은 이렇게 :

는

img.onload = function(){alert('loaded!')}; 
img.src = 'getImage?imgId=232132'; 

Answer 2

예. DOM 수정에 의해 트리거 된 콘텐츠를로드하면 JavaScript가 차단됩니다.

Answer 3

가장 간단한 대답은 '예, 그것은 비동기 적으로 일어날 것입니다. 그러나 조금 더 있습니다.

자바 스크립트에서 수행하는 작업은 표시해야하는 페이지의 모델 (DOM) 만 수정한다는 것입니다. 브라우저는 모델의 새 사양에 따라 페이지를 렌더링하고 기본적으로 이미지를 다운로드하는 것을 포함해야합니다. 그러나 브라우저가이 렌더링을 수행하는 방식은 브라우저에 맡기지 만 자바 스크립트를 차단해서는 안됩니다.

사실 내가 설명하는 사례를 처리하는 많은 주요 브라우저를 본 방식은 실제로 이미지에 대한 비동기 요청이 있지만 자바 스크립트 실행이 끝날 때까지는 아닙니다. 즉, 바쁜 대기 시간 (while (true) {})을 따라 가면 이미지가 전혀로드되지 않습니다. 그러나 이미지의 src을 변경 한 후 1 초 동안 시간 초과 이벤트를 설정하려면 페이지에서 새 src를 해석하고 이미지에 대한 비동기 요청을 수행했으나 이미지로드가 완료되었는지 또는 이미지가 완료되었는지 여부는 보증되지 않습니다. 초가 지나갈 때가 아닙니다. 그러나 다른 브라우저에서 다르게 수행 할 수 있으며 실제로 알고있는 동작 이외의 다른 동작에 의존하지 않는 것이 가장 좋습니다 (자바 스크립트를 차단하지 않으며로드를 완료 한 후에 작업을 수행하려는 경우 적절한 DOM을 사용해야한다.)

Answer 4

파일 헤더를 설정하십시오. 당신이 PHP를 사용하는 경우,이 시도 :이 질문에는 PHP가 없습니다

<?php 
header("Content-type: image/jpeg"); 
?> 

행운