You are to get images from the internet and change the
src attribute of an
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):
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 1: Creating the HTML
Create the HTML.
First create an
<div> element with id
"slide". We will be adding the images inside this
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.
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.
Make sure everything is working fine (use the Element Inspector, Console and the networks tab).
The official solution for this project can be found here: Solution: Image Slideshow.