자바 스크립트에서 이미지가로드되기를 기다리는 중
이미지 경로를 포함한 일부 정보를 반환하는 Ajax 호출을 만들고 있습니다.
이 모든 정보를 일종의 팝업으로 표시 할 HTML로 준비합니다. 팝업 div의 가시성을 숨김에서 표시로 전환합니다.
내 팝업 div의 위치를 설정하려면 이미지 높이에 따라 계산해야합니다. 따라서 위치를 설정하고 가시성을 가시성으로 전환하기 전에 이미지가로드 될 때까지 기다려야 크기를 알 수 있습니다.
재귀, setTimeout, 완전한 img 속성, while 루프로 트릭을 시도했지만 성공하지 못했습니다.
그래서 어떻게 할 수 있습니까? Ajax 호출에서 차원을 반환해야 할 수도 있습니다.
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";
그것은 위의 순서대로 수행하는 것이 중요합니다 : 먼저 핸들러를 첨부는 다음 을 설정합니다 src. 반대로하면 이미지가 캐시에 있으면 이벤트를 놓칠 수 있습니다. JavaScript는 브라우저의 단일 스레드에서 실행되지만 (웹 작업자를 사용하지 않는 한) 브라우저 는 단일 스레드가 아닙니다. 브라우저가를보고 src, 사용 가능한 리소스를 식별하고,로드하고, 이벤트를 트리거하고, 요소를보고 콜백을 위해 대기해야하는 핸들러가 있는지 확인하고, 이벤트를 완료하는 것은 완벽하게 유효합니다. 처리, 모두 사이src라인과 핸들러를 연결하는 라인. (콜백은 등록 된 경우 줄 사이에 발생하지 않고 대기열에서 대기하지만,없는 경우 이벤트를 기다릴 필요가 없습니다.)
jQuery를 사용하는 경우 로드 이벤트를 사용할 수 있습니다 .
예제를보십시오 :
$('img.userIcon').load(function(){
if($(this).height() > 100) {
$(this).addClass('bigImg');
}
});
내 페이지에 CAPTCHA (1st_image) 이미지가 느리게로드되고 CAPTCHA 이미지 (1st_image)가로드 된 후에 만 다른 이미지 (2nd_image)를 표시하고 싶었습니다. 그래서 CAPTCHA (1st_image) 이미지가 먼저로드 될 때까지 기다려야했습니다.
다음은 이미지가 먼저로드 될 때까지 기다린 다음 다른 이미지를로드하는 데 완벽하게 작동하는 솔루션입니다 (다른 이미지가로드되기를 기다리는 동안 "잠시 기다려주십시오!"이미지를 표시하는 것을 잊지 마십시오).
<script>
function checkImageLoad() {
if (document.getElementById("1st_image").complete == true) {
console.log("1st_image Loaded!");
}
document.getElementById("2nd_image").src = "http://example.org/2nd_image.png";
}
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://example.org/1st_image.png">
<img id="2nd_image" src="http://example.org/loading_please_wait.gif">
인터넷 속도가 느리거나 빠르며 브라우저는 전체 페이지가 모든 이미지와 함께로드 될 때까지 기다린 다음 (외부 링크 된 경우에도) 기능을 실행하므로 두 번째 이미지는 첫 번째 이미지가로드 된 후에 만 표시됩니다. 좋아.
고급 참고 : 이미지의 "src"에있는 웹 페이지 URL을 사용하여 먼저 웹 페이지를로드 한 다음 이미지를 표시 할 수 있습니다. 목적은 표시되는 두 번째 이미지 (예 : CAPTCHA)에 영향을 미칠 수있는 외부 웹 페이지에서 쿠키를로드하는 것입니다 .
참조 URL : https://stackoverflow.com/questions/2342132/waiting-for-image-to-load-in-javascript
'development' 카테고리의 다른 글
| 매개 변수없이 MethodInfo.Invoke (0) | 2021.01.06 |
|---|---|
| Java의 추상 클래스에 생성자가있는 이유는 무엇입니까? (0) | 2021.01.06 |
| matplotlib에서 ticklabel과 축 사이에 공간을 어떻게 추가합니까? (0) | 2021.01.06 |
| 정규식 문자 대괄호에 하이픈을 포함합니까? (0) | 2021.01.06 |
| 명령 행 인수로 프로그램 실행에 Ant 사용 (0) | 2021.01.06 |