CODEWITHSUNDEEP
javascripthtmlcss
John Doah
John Doah

Reputation: 1999

Optimizing image loading with JS

I'm lost and need some guidance with optimizing image loading on a website. I'm currently working on a simple landing page for a small business, and I have 48 pictures to display, by sets of 12.

I have four buttons, and each button shows a different set of images.

My problem is that the images I was provided with are large, and even when I put the image inside a 200x200 container (which I guess not really doing anything to the image size itself, am I correct?) clicking a button have a noticeable lag until displaying the new set of images, it effects the whole page (for example, the Bootstrap Carousel I'm using is getting laggy until the images are displayed).

I tried to search, and found JavaScript-Load-Image but I couldn't really understand how I need to work with it, as I'm not using FileReader. All the images I have are local, in the project folder.

This is how I change between the images:

//This function is getting called when an optionbtn is tapped,
//and calls the other function to create the full effect of loading the new images.
function handleOptionButtonClick(buttonId){
    changeOptionButtonColor(buttonId);
    switch(buttonId){
        case 'button1':
            loadImagesToArray('hospitalityTrays');
            break;
        case 'button2':
            loadImagesToArray('eventManagement');
            break;
        case 'button3':
            loadImagesToArray('cakes');
            break;
        case 'button4':
            loadImagesToArray('meats');
            break;
        default:
            loadImagesToArray('food');
    }
    fadeAndDisplayMainGrid();
}

//Loading the sources for the new images and setting them in the array
function loadImagesToArray(imagesOf){
    let src = './Images' + '/' + imagesOf + '/';
    for(var index=0; index<imagesToDisplay.length; index++){
        let newImageSrc = src + index + '.jpg';
        imagesToDisplay[index] = newImageSrc;
    }
}

//Displaying the images we got in the array, will be called after loadImagesToArray
function displayImagesFromArray(){

    let myGridCells = $('.foodImage');

    for(var index=0; index<myGridCells.length; index++){
        myGridCells[index].src = imagesToDisplay[index];
    }

}

//Fading out the current grid, changing the img srcs and fading the grid in.
function fadeAndDisplayMainGrid() { 
    $("#picturesGrid").fadeOut(500).promise().done(function(){
        displayImagesFromArray();
        $("#picturesGrid").fadeIn(500);
    });
}

handleOptionButtonClick - is the function that gets called when the user clicks a button.

loadImagesToArray - is getting the name of the images set to display, and fills an array with the sources of those images from the project folder (each category of images has it's own folder)

displayImagesFromArray - is taking the sources I have inside the array that was filled by loadImagesToArray, and changing my imgs srcs inside a grid.

fadeAndDisplayMainGrid - is fading the grid out, calling displayImagesFromArray so the src is changed and fading the grid in.

Upvotes: 1

Views: 775

Answers (1)

Mauro Doza
Mauro Doza

Reputation: 341

You are correct, the browser still needs to download the whole image then it resizes based on your styling so changing width and height in CSS won't help. There are several things you can do to speed this up.

  • Resize images based on the actual height and width you'd like them displayed at using another program, switch between images based on size of users viewport
    • image-full.jpg
    • image-200-200.jpg
  • Use progressive images (option when saving in Photoshop, Assetizr and other programs)
  • Use WebP format and have JPG format as fallback
  • Reduce size of file using image minification, some examples from google

Upvotes: 2

Related Questions