Does 'lazyload' support lazyloading of background images?

tuupola / lazyload

Vanilla JavaScript plugin for lazyloading images

https://appelsiini.net/projects/lazyload/

MIT License

8.76k stars 2.23k forks source link

Does 'lazyload' support lazyloading of background images? #441

Open jasomdotnet opened 5 years ago

jasomdotnet commented 5 years ago

Does 'lazyload' support lazyloading of background images (css), like bLazy, for example? What about iframes?

Soetens commented 5 years ago

Yes it should;

<div class="lazyload" style="background-image: url('thumbnail.jpg')" data-src="original.jpg" />

oleksii-sirochenko commented 4 years ago

This works good <div class="lazyload" style="background-image: url('thumbnail.jpg')" data-original="original.jpg" />

bilogic commented 4 years ago

While original.jpg is being loaded, thumbnail.jpg becomes invisible, causing a blank space in its place. Any idea how to overcome this?

oleksii-sirochenko commented 4 years ago

I guess it is the way it works. Just try to decrease load time of an original image.

651584008 commented 4 years ago

这并不能实现背景图片的需求，因为他 style="background-image: url('thumbnail.jpg')"消失的太快，data-original="original.jpg" 还没加载结束，第一张图就消失了。导致第二张图的加载过程显示出来。从上到下一横一横的加载，加载表现和img标签的方式不一样，请问怎么改善

slowhand11 commented 3 years ago

Hi, this doesnt work, what am i doing wrong? thumbnail.jpg will not be replaced at all.