Fast-loading pages reduce errors, save bandwidth, and please visitors. One method to decrease loading times and enhance performance involves optimizing image screen efficacy. Your mantra for achieving image efficiency should be “reuse, optimize, and preload.” While each of these methods plays an important part, we’ll concentrate on methods for preloading images.
To get this going, you will need to have a little section of script in the HEAD section of your page. Here’s a sample of a script that preloads a single image:
//Image width=225px and height=40px
Image01 = new Image(225,40);
//Picture relative URL is image01.png
Image01.src = “image01.png”;
Our next issues is what if we have multiple images to preload. We could go about this in two manners.
It works but is not great for my needs and it gets rather tedious especially when dealing with a large number of images. Therefore, we will need to find a simple and efficient method that lends itself to being both scalable and reusable.
In our case we added a few new components. Firstly we created a variable “I” that’s our counter and place it value to zero. We created a new object “imageObj” that’s a place holder for graphics we wish to load. We created an array “image” to hold the name of our pictures we wish to preload. Eventually we added a counter that cycles through our array and loads the pictures.