Image fails to load in rare cases. Preload issue?

Ask the community
, ,
27

@sebastienmoutondev So far I’ve haven’t see the problem with a missing image. I tried with Safari and Chrome. I did see the issue of clicking too fast on the button causing an overlap. So…

If you’ll permit me to suggest another approach. Let’s get rid of the await and use the .then() function to handle the returned Promise . Only the hide() needs to have the Promise handled since the show() is dependent on the hide() finishing first. Also, we’ll use a debounce mechanism which will prevent multiple button clicks overlapping. For more information, see the article Give the TextInput onKeyPress Function some time .

let debounceTimer;
function onClick() {
   if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
   }

   debounceTimer = setTimeout(() => {
       if (SHOW_CROSS) {
            $w("#image1").hide()
                .then(() => {
                    $w("#image2").show("turn")
                });
       } else {
            $w("#image2").hide()
                .then(() => {
                    $w("#image1").show("turn")
                });
       }

       SHOW_CROSS = !SHOW_CROSS
    }, 500); // 500 milliseconds works for me, your mileage may vary
}

I tried this out on a test site and it seemed to work smoothly and reliably. I hope this helps. :beers: