Jednorazowy błysk przy podmianie obrazka JS

Question

Witam, wiecie jak działa ładowanie elementów na stronę poprzez JS? Mam taki "problem" gdy wchodzę na stronę pierwszy raz za pierwszym tylko kliknięciem które podmienia obrazek w divie jest lekkie mignięcie (rozumiem zmieniam ścieżkę, przeglądarka potrzebuje chwili żeby ogarnąć, pobiera nowy obrazek, obrazek ładuje) żeby rozwiązać ten problem zrobiłem drugiego w podmianie pomocniczego diva żeby zrobić ładne przejście i wszystko działa ale nie rozumiem dlaczego nie działa zawsze za pierwszym razem (sprawdzałem zdjęcia pobierają się zawsze po kliknięciu ale na stronie czasem mignie a czasem nie)

async function changeMini(wher,what,value) {
	
	if(value == "null") {} else {
        
		document.getElementById(wher).style.backgroundImage = "url('img/perks/"+what+value+".jpg')";
		
		for(var i = 1; i >= 0; i -= 0.1) {
			
			document.getElementById(wher+'Inside').style.opacity = i;
			await sleep(20);
		}
		document.getElementById(wher+'Inside').style.backgroundImage = "url('img/perks/"+what+value+".jpg')";
		document.getElementById(wher+'Inside').style.opacity = 1; 
	}
}

  

Answer 1

Poczekaj na wczytanie nowego obrazka i dopiero podmieniaj ścieżkę. Obrazek możesz wczytać poprzez zrobienie
 

function preload(urlToLoad, callback){
    const img = new Image();
    img.src = urlToLoad:
    img.onload=callback;
}

Do tego nie rób nigdy animowania CSSa w taki sposób jak zrobiłeś. Poczytać o właściwości transition w CSS