1

In this demo:

http://dinbror.dk/blazy/examples/?ref=blog

at paragraph:

1.3: Lazy load image example with low res image placeholder

the blazy plugin uses a lower quality pixely image to preload the image and then serve the high quality image right after.

I don't understand how that is done. Where is the pixely image coming from? how to achieve the same effect with images? lower quality first and then load the right size?

user2513846
  • 1,151
  • 2
  • 16
  • 39
  • The pixely image is coming from the `src` attribute, while the high resolution is stored in `data-src` attribute. – yuriy636 Sep 06 '17 at 21:36

1 Answers1

3

You can use something like that:

<img src='lowres.jpg' id='sampleImage' 
 onLoad='javascript:this.src = "highres.jpg"' />

After loading the low resolution version, the browser will execute the javascript and load the high resolution image, and replace the low resolution.

ThoriumBR
  • 930
  • 12
  • 25
  • If you are going to make it inline (a bit of a bad practice) you can refer to the `img` element as `this`: `onLoad='this.src = "highres.jpg"'` – yuriy636 Sep 06 '17 at 21:40
  • @yuriy636 it's just a limited sample to show how it can be done. OP should use a function to change the images. And thanks for `this.src`, I forgot about it... – ThoriumBR Sep 06 '17 at 21:43