Lo que quiero hacer:

Quiero agregar todas las imágenes dentro de una carpeta específica en una Lista. La cantidad de imágenes dentro puede variar entre 1 y 10, pero todas se nombran como números. La forma actual en que lo estoy haciendo es primero haciendo los 10 y luego eliminando los que no existen.

 List = [] for(var i=0; i<10; i++){ List.push('Folder/' + i+1 + 'jpg') } List = ['Folder/1.jpg', 'Folder/2.jpg', 'Folder/3.jpg'..]

Nota: no voy a alojar esto en ningún lado. Esto es algo que estoy haciendo solo para mí. Cuando quiera usar el sitio, simplemente abriré index.html desde la carpeta del proyecto.

Investigué un poco y esto pareció funcionar, pero solo mientras usaba el servidor en vivo en Visual Studio. Esto no funciona cuando simplemente se abre el archivo index.html localmente.

 function checkImage(){ temp_list = [] for(i=0; i<List.length; i++){ var http = new XMLHttpRequest(); http.open('HEAD', List[i], false); http.send(); if(http.status != 404){ temp_list.push(List[i]) } } List= temp_list

También probé esto, pero elimina todo en la Lista.

 function checkImage(){ temp_list = [] for(i=0; i<List.length; i++){ checkImage2(List[i]) } console.log(temp_list.length) List= temp_list } function checkImage2(path){ var img = new Image(); img.onload = temp_list.push(path) img.onerror = temp_list.splice(path,1) img.src = path }

Mi pregunta: ¿Hay una mejor manera de verificar si existe un archivo (img)?