We have used javascript image sliders for a few years. Our first sliders never loaded instantly and we used animated GIF 'placeholders' while they loaded. Even paid for image sliders have this problem. I was reading code for image sliders when I came-up with a really simple solution that works for Javascript and jQuery image sliders. It's also free. Click 'Read more' to learn what I found.
THE SECRET
Just replace the 'placeholder' animated GIF with the first image of your slideshow series. So the placeholder is also the first image. By the time the first slide image loads, nothing changes because it's already downloaded. The slideshow then works the same way, cycling thru the list of images in an endless loop. It works seamlessly.
_________________________________________________________
If you manage websites with image sliders you already know how to update images for your slider. Look for the placholder code like this: "#slider {
width: 500px; height: 300px; background: #fff url(loading.gif)"
Paste the URL of your first image into the (loading.gif) brackets. Note, if you change the first image in the series then don't forget to paste it's address in this location as well as the usual image list.
________________________________________________________
©Using a placeholder of the first image of a Javascript or jQuery image slider to reduce latency is copyright Karl Stevens March 21, 2015.
No comments:
Post a Comment