I'm currently developing a website that implements a strategy of loading low-resolution images first, and then swapping them for high-resolution versions once they are fully loaded. By doing this, we aim to speed up the initial loading time by displaying smaller blurred images, which are then replaced with sharp, high-resolution images.
I've been experimenting with JavaScript to achieve this functionality, but I've encountered some challenges along the way, especially since I'm relatively new to this area. Here's the code snippet that I've managed to put together so far. Any assistance would be greatly appreciated.
(function() {
let image = document.images //all low-res blurred images of class "image"
let big_image = document.getElementsByClassName("image")
function loadImage() {
for (let i = 0; i <= big_image.length; i++) {
big_image.onload = function() {
image[i].src = big_image[i].src
image[i].className = "noBlur" //set class to noblur from image to remove the blur filter
}
}
}
setTimeout(function() {
big_image[0].src = "mainPage/res/fireWatch.jpg" //actual high res image srcs
big_image[1].src = "mainPage/res/mountainMan.jpg"
big_image[2].src = "mainPage/res/pyramid.jpg"
big_image[3].src = "mainPage/res/valley.jpg"
big_image[4].src = "mainPage/res/valley.jpg"
big_image[5].src = "mainPage/res/valley.jpg"
}, 50)
document.addEventListener('DOMContentLoaded', loadImage, false);
}());