CODEWITHSUNDEEP
javascriptjquery
Jonathan
Jonathan

Reputation: 683

Lazy loading images with placeholder dominant colour

I'm looking to do something on the lines of how niice.co load their images via lazy loading.

As you can see from their website when scrolling, before lazy loading the image the background of the div where the image is placed is actually the dominant colour of the image.

I've looking around and found some plugins such as http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ but don't know how they're merging the two.

Upvotes: 2

Views: 4189

Answers (1)

Citrullin
Citrullin

Reputation: 2321

Will not work. The image isn't available while loading. You can check the color in your backend. Then: Save the color in a db and output the hex as data-attribute and use it as background in javascript or directly in the element style. Or another solution: Use the adaptive background libary if the color isn't saved. Then: Call a backend API and save the Hex. At the next request you can use the hex with javascript or in the element style.

Edit: Thanks Empiric for the HowTo Link: https://manu.ninja/dominant-colors-for-lazy-loading-images

One more performance Tipp: Doesn't load all images at one time. It's a better UX to split the requests. If you have 8 images, 4 per line, load the first 4 images. If they are finshed: Load the second line and so on. One more important thing: If you have small profil images etc. (like stackoverflow) doesn't load this images while the content images are loading. The visitors focus point is the most important point.

Upvotes: 4

Related Questions