I'm working on a site that displays satellite images depending on user input. The inputs are made up of radio buttons and dropdowns for things such as region, satellite, and date. I have the JavaScript file set up so that when the input state changes it searches through a json file. The json contains information about the images like the filepath, name of image, etc. All of the images that match the input state are put into the slickjs image carousel; with irrelevant ones being removed.
So the problem I'm having is that when the images are being swapped from the carousel there's a bit of a blink before the new image appears on the screen. The blinking mostly occurs when an image is being loaded for the first time. The second time through the transition between the images seems a bit smoother. I tried preloading images that could possible be viewed next using
(new Image()).src = item
This helps a bit but the blinking still occurs sporadically. Could anyone offer some insight as to how I could fix the blinking completely?
