Image Loading Tutorial

1. Long loading time

For demo purpose, I have used large images of over 10MB. Better open the code examples when connected to wifi.

<img src="http://s1.1zoom.me/big3/761/Taj_Mahal_India_Agra_502134.jpg" >
<img src="http://s1.1zoom.me/big3/15/India_Temples_Houses_498379.jpg" >
The example code

Note: The long loading time harms user experience.

2. Load callback of images

Rendering image elements with JavaScript

imageURL = [
  "http://s1.1zoom.me/big3/761/Taj_Mahal_India_Agra_502134.jpg",   
  "http://s1.1zoom.me/big3/15/India_Temples_Houses_498379.jpg",
];

var imgDOM = [];

for(var i=0;i<imageURL.length;i++){
    
    imgDOM[i] = new Image();
    
    imgDOM[i].onload = function(){
        console.log("Image loaded.");
    }
    
}

window.onload = function(){
    
  for(var i=0;i<imageURL.length;i++){
    
    imgDOM[i].src = imageURL[i];
    
    document.body.appendChild(imgDOM[i]);
    
  }
    
}
The example code

Note: the loading of image does not start until you assign its src.

3. Image preloader

Counting load with JavaScript

imgDOM[i].onload = function(){
        
        loadedImages++;
        updateLoadingCount();
        if(loadedImages==totalImages)
          switchDiv();
    }
    
function updateLoadingCount(){
    
    document.getElementById("percentage").innerText = parseFloat(loadedImages/totalImages*100).toFixed(2)+"%";
    
}

function switchDiv(){
    
    document.getElementById("contents").style.display = "block";
    
    document.getElementById("loading").style.opacity = 0;
}
The example code

Note: The mask layer of loading animation fades out when all images is loaded.

4. Simple lazy loading

Load images when entering the corresponding page

function evDel(event){
    if(event&&event.target){
        if(event.target.matches("span")){
            title.innerText = event.target.innerText;
            showAnimation();
            imgDOM.onload = hideAnimation;
            imgDOM.src = data[event.target.innerText];
        }
    }
}The example code

Note : Reassigning src triggers load again.

5. Advanced lazy loading

Load images when scroll reach the image

if(img.offsetTop < (window.innerHeight + window.pageYOffset)) {

      img.src = img.dataset.src;

      img.classList.remove('lazy');
 }
The example code

Source of reference shared by Morpheus

(use wifi) Image Loading Tutorial