0

I'm working on a webpage that loads high-resolution images after low-res images are applied and set them to the initially loaded small low-res images. This is done to load smaller blurred images faster and replace them with high-res images, unblurred after they have been loaded completely.

I'm trying javascript to add this functionality but got stuck. Particularly because I'm new to this. This is what I wrote so far. Any help is appreciated. T

(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);
}());

inspiration

jizhihaoSAMA
  • 12,336
  • 9
  • 27
  • 49
Anurag Dhadse
  • 1,722
  • 1
  • 13
  • 26
  • What you are looking for is called **Progressive Image Loading** and you can see It browsing [Medium](https://medium.com) website. You can follow this guides ti obtain the same "effect": [First](https://medium.com/front-end-weekly/progressive-image-loading-and-intersectionobserver-d0359b5d90cd) | [Second](https://medium.com/frontend-digest/progressively-loading-images-in-react-107cb075417a) | [Third](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/) – Carlo Corradini Jul 01 '20 at 21:39
  • You could try something like this https://jsfiddle.net/4jsp935L/ – Canvas Jul 01 '20 at 21:42
  • Thankyou, @CarloCorradini, I worked on both of your suggestions but ended up using an open-source library. For sure you helped in acquiring more information about this topic – Anurag Dhadse Jul 02 '20 at 09:22

1 Answers1

0

As the comment suggests, Progressive image loading like medium can be implemented by using a simple open-source files from GitHub blurry-image-load. Read readme.md and add the necessary files to your project and follow the instruction.

Anurag Dhadse
  • 1,722
  • 1
  • 13
  • 26
  • I suggest you to use a more robust library such as [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload) and apply a blur filter to every unloaded image. – Carlo Corradini Jul 02 '20 at 10:38
  • @CarloCorradini Thanks for one more suggestion. I'll try this one also. If you are interested you can help me solve me one more [problem](https://stackoverflow.com/q/62670221/8277795) – Anurag Dhadse Jul 02 '20 at 14:28
  • Done, hope I was helpful again :) – Carlo Corradini Jul 02 '20 at 15:11