Why sometimes does the img jump in this Blackjack game

In this Blackjack game (https://schaulcode.github.io/blackjack/) written in javaScript sometimes when the cards get dealt the img jumps. it looks like the code gets executed faster the the browser can paint the picture. Interestingly this only happens online, during development when the whole program was locally on my machine this issue didn’t occur.

Could anyone explain the reason behind it and what is the best way to solve the problem?

here is a link to the source code on github: https://github.com/schaulcode/blackjack/blob/master/js/script.js

the function responsible for turning the card is called turnCard() and its called by the function moveCard()

here is the relevant code :

moveCard(posX,posY){
            let card = document.getElementById("deck-cards-container").lastChild;
            card.classList.add("card-dealing");
            card.classList.remove("card-on-deck")
            card.style.top = posY + "px";
            card.style.left = posX + "px";

            if(this.type != "com" || this.hand.length == 1 || turn == "com"){
                this.turnCard(card)
            }else{ 
                card.lastChild.lastChild.classList.remove("card-back");
                card.lastChild.lastChild.classList.add("card-back-com");
            } 

            var promise =  new Promise((res)=>{
                card.addEventListener("transitionend",(e)=>{
                if(e.propertyName == "top") res(card)
                })   
            })
            return promise

        }
        turnCard(card){
            let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
            card = card.lastChild
            card.style.transform = "rotate3d(0,100,0,90deg)";
            card.style.transition = "transform 250ms linear";
            card.addEventListener("transitionend",()=>{
                card.lastChild.classList.remove("card-back");
                card.lastChild.classList.add("card-front");
                // let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
                card.lastChild.src = "./cards/PNG/" + pic;
                card.style.transform = "rotate3d(0,1,0,180deg)";
                card.style.transition = "transform 250ms linear";
            })
            return new Promise(res => setTimeout(()=>res("done"),1650));
        }

JavaScript
​x
 
moveCard(posX,posY){
            let card = document.getElementById("deck-cards-container").lastChild;
            card.classList.add("card-dealing");
            card.classList.remove("card-on-deck")
            card.style.top = posY + "px";
            card.style.left = posX + "px";
​
            if(this.type != "com" || this.hand.length == 1 || turn == "com"){
                this.turnCard(card)
            }else{ 
                card.lastChild.lastChild.classList.remove("card-back");
                card.lastChild.lastChild.classList.add("card-back-com");
            } 
​
            var promise =  new Promise((res)=>{
                card.addEventListener("transitionend",(e)=>{
                if(e.propertyName == "top") res(card)
                })   
            })
            return promise
​
        }
        turnCard(card){
            let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
            card = card.lastChild
            card.style.transform = "rotate3d(0,100,0,90deg)";
            card.style.transition = "transform 250ms linear";
            card.addEventListener("transitionend",()=>{
                card.lastChild.classList.remove("card-back");
                card.lastChild.classList.add("card-front");
                // let pic = this.hand[this.hand.length-1][Object.keys(this.hand[this.hand.length-1])[0]]
                card.lastChild.src = "./cards/PNG/" + pic;
                card.style.transform = "rotate3d(0,1,0,180deg)";
                card.style.transition = "transform 250ms linear";
            })
            return new Promise(res => setTimeout(()=>res("done"),1650));
        }
​

Answer

As I pointed out in the question, this issue only happend once the application was online but during development on the local machine it never happened. So it seemed that the browser couldn’t download the image so fast every time a new card was played.

To fix that problem I added this piece of code in the <head>

<link rel="preload" as="image" href="cards/PNG/2C.png">
<link rel="preload" as="image" href="cards/PNG/3C.png">
<link rel="preload" as="image" href="cards/PNG/4C.png">
<link rel="preload" as="image" href="cards/PNG/5C.png">
<link rel="preload" as="image" href="cards/PNG/6C.png">
<link rel="preload" as="image" href="cards/PNG/7C.png">...

JavaScript
 
<link rel="preload" as="image" href="cards/PNG/2C.png">
<link rel="preload" as="image" href="cards/PNG/3C.png">
<link rel="preload" as="image" href="cards/PNG/4C.png">
<link rel="preload" as="image" href="cards/PNG/5C.png">
<link rel="preload" as="image" href="cards/PNG/6C.png">
<link rel="preload" as="image" href="cards/PNG/7C.png">...
​

Now I Preload all images straight when the page loads and there is no need anymore for the browser to download each image individually, speeding up the display time when the card is dealt. And therefore there is no jump int the images anymore.

Advertisement

Answer