I get a Json dict from a server which contains data about a image gallery like this:
[
{"title": "Some Cat", "url": "http://example.com/image.png"},
{"title": "My Foot", "url": "http://example.com/image.png"},
{"title": "Joysticks", "url": "http://example.com/image.png"},
...
]
And i have this html snippet:
<div id="image-slideshow">
<img src=""/>
</div>
I want that after 10 seconds, the image will be replaced with the next one of the Json dict with a "blur over" animation using jQuery.
The problem is, the picture should switch after the browser have completely loaded it to avoid an empty image. How is this possible?