search

cdowdy / io-lazyload

A javascript library to lazy load images with intersection observer
https://cdowdy.github.io/io-lazyload/
MIT License
19 stars 6 forks source link

Feature Request: Possibility to lazyload background-images #9

Open fliespl opened 4 years ago

fliespl commented 4 years ago

Possibly using some other data tag like data-bg?

cdowdy commented 4 years ago

Sorry @fliespl I got sidetracked and completely forgot about this...

Anyways... I probably should have listened to @pedrosanta since they had better foresight than I did when they did the "visible" class pull here https://github.com/cdowdy/io-lazyload/pull/7

Would allowing the lazyload class (or whatever you're using) to be attached to say a div like so: 

<div class="lazyload lazyload-bg-example" data-src="a-image.jpg"></div>

work for most cases?

This would allow for a either using css alone to apply the image like:

// placeholder image
.lazyload-bg-example { 
  background-image: url('low-quality-placeholder.jpg');
}

// image applied once the 'visible' class is set
.lazyload-bg-example .visibile {
  background-image: url('lazy-loaded-image.jpg');
}

or you could use the data-src and apply it inline with css or your own javascript ?

That sound like ti would be workable to your or anyone else reading this?