In this mini project, you will make a JavaScript based automatic image slideshow, which will loop over a set of images from the internet and display them one by one on the screen. In the process, you’ll get to practice most of the JavaScript skills you have acquired over the course, including arrays, functions, creating dynamic event listeners, image preloading, etc. Let’s get started!

Overview

You are to get images from the internet and change the src attribute of an <img> element after a fixed interval of time. The images should also be preloaded in background using JavaScript.

Optionally, you can also further beautify the slideshow using animation effects in jQuery.

Here’s the slideshow we made (recorded with Fast 3G network throttling):

General Guidelines

Although we have provided guidance and instructions for the project, you’ll be writing all the code for this project.

You can use the following images for the slideshow

https://imgur.com/download/yAKnWJ2
https://imgur.com/download/6bsZq05
https://imgur.com/download/fY0iQZR
https://imgur.com/download/aCkT7TN
https://imgur.com/download/wgdprUW

Keep reading for more detailed instructions. If you feel confident, try to do the project without looking at the rest of the instructions (or use as little as needed). The solution is given at the end of this tutorial.

Step-by-step Guidelines

Step 1: Creating the HTML

Create the HTML.

First create an <div> element with id "slide". We will be adding the images inside this div.

Step 2: Initialization

Create an array with the image URLs in strings as its elements. We will be fetching the URLs from this array to download the image and display when required.

Initialize any other variables that you think might be needed.

Step 3: Preloading

In this project, you need to preload multiple images. There is one important things to keep in mind: Do not preload all images simultaneously.

Preloading all images simultaneously implies that the user won’t be able to see any image till all of them load. That is not what we want! We want them to wait less, not more. For example, let’s say downloading one image takes 0.8 seconds. If you download all images simultaneously, they will all compete for the bandwidth, and will all roughly finish downloading after 4 seconds. Only then will the user be able to see an image.

What we want is, the user waits 0.8 seconds to see the first image. Let’s say he / she wants to see this image for 1 second. During this time, the second image has already downloaded. So, the second image loads instantaneously. And similarly for the rest of the images.

We are preloading multiple images here, so it’s good to keep track of which images have finished loaded. Then, in the slideshow, we can use this information before changing the image.

Step 4: Slideshow

Write a function which is called to change the image displayed. When this function is called, check if the image has been loaded. If yes, change the image inside the div. If not, display a message saying that the image is still loading.

Create one Image object per image URL. Changing the src of existing Image objects, or creating new Image objects can cause the image to be redownloaded.

Use the setInterval method to call the above function at some reasonable time interval (say every 1 second). The slideshow should be working fine at this point, but you can add animations if you wish to.

Step 5

Make sure everything is working fine (use the Element Inspector, Console and the networks tab).

Solution

The official solution for this project can be found here: Solution: Image Slideshow.