Jquery img.onload가 for 루프에서 실행되지 않습니다.

Question

동적 이미지 갤러리를 수행하려고합니다. 인덱스로 지정된 모든 이미지 (예 : "150.jpg")가 인덱싱 될 때 순서대로 이미지가 나열됩니다. 1.jpg, 50.jpg, 200.jpg 등 ... 여기에 for 루프를 만들었습니다. 주어진 이름의 이미지가 있는지 확인한 다음 루프가 멈추는 지 확인합니다.

var x = 1; 
for (w=0;w==0;x++){ 
var newurl = imgfolder + x + ".jpg"; 
var img = new Image(); 
img.src = newurl; 
img.onload = function() {alert("Yeah:Image exists"); w=1;} ; 
} 

문제는이 루프가 제대로 작동하지 않고 있다는 것입니다,하지만 루프 내부 때 다음 img.onload이 실행되지 않습니다 다음은 내 코드입니다. 어떤 도움을 주셔서 감사하겠습니다. 3 일간 두통이 나옵니다.

Answer 1

당신은 이미지를 캐시에서 취할 수 있으므로 즉시로드 할 수 있기 때문에 src =

이 인 onload =하기 전에 수행해야합니다. onload =을 다음 행에 정의하면 이미 너무 늦을 수 있습니다.

[편집 :]

게다가 또 다른 문제가 있음 :

이 흐름 상상 :

• for (w=0;w==0;x++){
  • w=0
  • w==0는 사실을, 그래서
  에 이동
• var newurl = imgfolder + x + ".jpg";
• var img = new Image();
• img.src = newurl;
• img.onload = function() {alert("Yeah:Image exists"); w=1;} ;
• for (w=0;w==0;x++){
  • w==0은 여전히 ​​사실이다, 그래서
• var newurl = imgfolder + x + ".jpg";
에 이동3210
• ...

JavaScript에는 단일 스레드가 있습니다. 이는 아무 것도 비동기 적으로 실행할 수 없음을 의미합니다. 코드가 멈추지 않기 때문에 alert("Yeah:Image exists"); w=1;이 실행될 기회가 없습니다. 그러나 w=1을 실행하면 루프에서 벗어날 수있는 유일한 기회입니다.

Answer 2

for 루프 조건은 반복을 방지합니다. @Matmarbon이 제안 나는 또한 온로드 할당의 순서를 변경 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

for (x=0; x<10; x++){ 
    var newurl = imgfolder + x + ".jpg"; 
    var img = new Image(); 
    img.onload = function() {alert("Yeah:Image exists"); w=1;} ; 
    img.src = newurl; 
} 

참조하십시오.