progressive image javascript

prima.js

// When loading the site...
window.onload = function() {
  
  // Find the elements that are marked as placeholder and img-small and store their reference
  var placeholder = document.querySelector('.placeholder'),
      small = placeholder.querySelector('.img-small')
  
  var img = new Image();
  img.src = small.src;
  img.onload = function () {
   small.classList.add('loaded'); // Change it"s opacity to 1.0 to display it immediately
  };
  
  var imgLarge = new Image();
  imgLarge.src = placeholder.dataset.large; 
  imgLarge.onload = function () {
    imgLarge.classList.add('loaded'); // Display the full-res image once it"s loaded
  };
  placeholder.appendChild(imgLarge); // Add the loaded image to the div, to actually insert it into the website.
}