비동기 또는 동기화? Image 객체의 src 속성을 설정할 때?

var img=new Image(); 
img.src='xxxxx';

브라우저가 이미지가로드 될 때까지 기다렸다가 다음 코드 줄을 실행합니까?비동기 또는 동기화? Image 객체의 src 속성을 설정할 때?

출처

2010-04-22 lovespring

해당 동작은 비동기입니다. 많은 이미지 '사전 로딩'코드는 해당 기능을 사용합니다.

편집 : 조금 더 유용한 정보도 제공합니다. 당신은 이미지가 자바 스크립트의 이미지 객체를 통해로드 될 때까지 특정 작업이 동 기적으로 대기가하고자하는 경우, 당신은과 같이, onload 이벤트를 사용할 수 있습니다

var img = new Image(); 
img.onload = function() { /* onLoad code here */ }; 
img.src = 'xxxxxx';

출처

2010-04-22 13:46:33 Dereleased

이미지 src를 설정 한 후에 이미지 소스를 설정하고 imediatelly 크기를 조정할 때 비동기 이미지로드에 유의하십시오. https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader 크기를 조정하거나 작동하지 않을 수 있습니다 ... 로드를 사용해야합니다 ... – OSP

var에 IMG = 새 이미지();

이미지를 만드는 기존 방법입니다.이 이미지는 더 이상 사용되지 않습니다. document.createElement('IMG')을 선호하거나 문자열 및 innerHTML을 통해 하나를 만듭니다.

이미지는 replaced elements입니다. 즉, 이미지가 도착할 때마다로드되지만 크기가 지정되어 있으면 레이아웃 플로우에서 공간이 예약됩니다. (그렇지 않은 경우 아이콘 크기의 공간이 예약되고 이미지가 머리글에 치수와 함께 도착하면 화면이 다시 그려지므로 사용자 경험이 혼란 스러울 수 있으므로 페이지 렌더링 중에 이미지 치수를 준비 할 것을 권장합니다 처음으로.)

출처

2010-04-22 13:52:54 Robusto

폐기 됨? 정말? 나는 그것이 처음에는 어떤 표준의 일부 였다고 믿지 않는다. –

@Tim Down : 나는 이것이 현재의 연습의 일부가 아닌 이미지를 만드는 오래된 (c. 1990 년대) 방식이라는 것을 의미합니다. – Robusto

'new Image()'는 이미지를 지원하는 모든 스크립팅 가능 브라우저에서 계속 작동하며'innerHTML'보다 선호합니다. 'document.createElement ("IMG")'가 바람직하다. –

@ 삭제 된 이미지의 사전로드는 비동기 적으로 수행됩니다. 그냥 배열이나 이벤트 처리기를 사용하는 것처럼 자바 스크립트에서 Image() 객체에이 기술을 사용하는 여러 가지 방법이 있다고 덧붙였습니다.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

출처

2010-04-22 13:54:00 amelvin

변경 SRC는 비동기입니다.

코드

image.src = "http://newimage-url";

즉시 반환하고 브라우저는 다른 스레드에서 새로운 이미지를로드합니다. 완전히로드되기 전에 너비 또는 높이와 같이 해당 <img> 태그의 모든 속성이 올바르지 않습니다.

그래서 $(image).width()은 새 이미지의 너비를 반환하지 않을 수 있습니다.

@Dereleased가 지적했듯이 이미지로드가 완료된 후에 만 코드가 실행되는 '로드 중'방법을 구현할 수 있습니다. jQuery의 load()이이를 쉽게 수행 할 수 있습니다.

출처

2012-01-04 14:52:00 luanjunyi

비동기 또는 동기화? Image 객체의 src 속성을 설정할 때?

답변

관련 문제