Javascript: how to execute a function within a function without delay?

Question

I'm trying to make an automated image gallery using javascript to paste img-statements (+ some extras for css) into html. All the images are in the same folder and are named image (1), image (2), ... Apparently client side can't know the name of the files in the folder nor the amount of files. The append-process works fine, but I can't find a way to stop without giving the amount of pictures myself. I'm trying to stop the append-process using ".onerror" when the browser can't find the next image, but it is always skipped until the end (resulting in an infinite loop (I'm using a "i<=6" for testing)).

Thanks! Here is my code:

function showgallery() {
  let flag = true;
  let i = 1;

  while (i <= 6 && flag) {
    $("#fotos").append(`<div class="cssbox">
            <a id="image${i}" href="#image${i}"><img id="picture${i}" class="cssbox_thumb" src="../photogallery/image (${i}).jpg">
                <span class="cssbox_full"><img src="../photogallery/image (${i}).jpg" /></span>
            </a>
            <a class="cssbox_close" href="#void"></a>
            <a class="cssbox_prev" href="#image${i-1}">&lt;</a>
            <a class="cssbox_next" href="#image${i+1}">&gt;</a>
            </div>`);

    document.getElementById(`picture${i}`).onerror = () => {
      flag = false;
    }

    i++;
  }
}

window.onload = showgallery;

Quick and dirty solution. Make a HEAD ajax request to the file. If it returns a success response code, it exists, append it, increment, repeat. If it returns a 404 or some other error response code, it does not exist, stop processing. — Taplar, Aug 21 '20 at 17:32
The reason for using a HEAD request vs a GET request, is because a HEAD request will not return the image data. Since you are only trying to determine if the file exists or not, you do not need the data. — Taplar, Aug 21 '20 at 17:34
See [this thread](https://stackoverflow.com/questions/4715223/ajax-head-request-via-javascript-jquery). Seems to answer your problem. — user548, Aug 21 '20 at 17:38
I'm sorry for the late response. I tried all of the above and it works, but only for the image itself, I can't seem to get the link and span, ... that I really need to be able to click on the picture, see it bigger, ... Is there no way I can append the entire string? — Luachmor, Aug 25 '20 at 12:13

score 0 · Answer 1 · answered Aug 21 '20 at 17:46

The reason why it's skipping some is because it takes time to load each image and for onerror to be called, yet you are doing this all in a loop which executes all the code without waiting for the error, so even if there is an error the flag variable won't be changed until the error event is fired, which happens after the current loop cycle

The way to do this instead is use recursion, if a certain condition is not met yet. Also I would recommend using Image for testing then appending it to the document Also you don't even need error you can just only append it if it loads successfully

So you can use recursion here like

var cur = 0
function getImg() {
    var img= new Image ()
    img.src = "image (" + (cur++) + ").jpg"
    img.onload = () => {
            fotos.appendChild(img)//or other span elements etc that have img as a child
            
            getImg()
        }
//if you want to know when it ended then you can use .onerror
       img.onerror = () => console.log("done")
}

getImg()

Javascript: how to execute a function within a function without delay?

1 Answers1