I'm in the process of developing a website that features a slideshow with numerous high-resolution images. To ensure smooth and seamless user experience, I wanted to preload these images so that there is minimal loading time or lag when users navigate through the site. After researching various methods, I stumbled upon this resource and decided to implement JavaScript Method #1 as instructed on the page.
<div class="hidden">
<script>
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
// List of image paths to be preloaded
preload(
"/img/slides/bbq.jpg",
"/img/slides/ext-avt-office.jpg",
// More image paths...
)
//--><!]]>
</script>
</div>
However, due to the large file sizes of the images, it has significantly increased the site's loading time. Even after optimizing the images, PageSpeed analysis still rated the site with a low score. The total size of all images combined amounts to 13.8 MB, down from over 50 MB previously.
Are there more efficient techniques to preload such massive images? You can view the website at this live link.
Update:
Here's the approach I decided to experiment with based on the recommended solution below:
$(window).on('load', function() {
function preload(imageArray, index) {
index = index || 0;
if (imageArray && imageArray.length > index) {
var img = new Image ();
img.onload = function() {
preload(imageArray, index + 1);
}
img.src = images[index]['serving_url'];
}
/* 'images' is an array containing image metadata */
preload(images);
});
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg"
];
I'm unsure about what should be placed within the serving_url parameter.