search

luis-almeida / unveil

A very lightweight jQuery plugin to lazy load images
4.16k stars 676 forks source link

added some basic support for background images. #64

Open LiamChapman opened 10 years ago

LiamChapman commented 10 years ago

I've added some basic background image support by adding a new data attribute of data-bkg or data-bkg-retina. It checks to see if data-bkg is defined and applies it. Might need a tiny bit more testing. But the changes are so small it should be ok.

brainbrian commented 10 years ago

Tested @urre 's fix above combined with @LiamChapman 's original code and all seems good in my testing so far.

Yacine-krk commented 8 years ago

Can you please give a concrete example of how we can use this ? Thanks

drannex42 commented 8 years ago

+1 @Yacine-krk

LiamChapman commented 8 years ago

Hi @Yacine-krk and @macleodsawyer ,

Apologies for not responding to this. It's been a while since I made this pull request. It's quite easy to implement. First, you have to use the code changes used in my pull request. Then all you have to do is use the data attribute 'data-bkg="mybackground-image.jpg"', you can also use data-bkg-retina for retina ready images.

Something to bare in mind is that you may need CSS to specify the dimensions of the element you want to use it on, or make sure your element has content so that it's visible when scrolling into view.

Again, it's been a while since I've used this. I'll try and help where I can.

Cheers,

Liam

SuN-80 commented 8 years ago

Adding a specific attribute for background images complicates implementation for nothing... Instead, why not to check if data-src is an attribute of an image OR something else?

if (this.tagName !== "IMG") 
 this.style.backgroundImage = "url(" + source + ")";
else
 this.setAttribute("src", source); // default