javascript - How to solve the problem of flickering when dynamically replacing images based on time?

Question

The seedlings in the picture have three growth states. Use the countdown method to dynamically change the src in the img tag.
It performs well on Android. On iOS, it counts once and the seedlings flash once.
I don’t know the reason. Can I ask for a solution?

js is written like this (very scumbag, don’t spray~)

Answer 1

1. First, preload the image

2. Just change the src attribute of the image every time to reduce unnecessary rearrangements

Answer 2

Combine the picture into a Sprite picture and modify the display coordinates of the picture

Answer 3

Image preloading is the key