How to Lazy Load div background images

Question

As many of you know it is widely used to lazy load images.

Now i want to use this as lazy load div background images.

How can i do that ?

I am currently able to use http://www.appelsiini.net/projects/lazyload that plugin

So i need to modify it in a way that it will work with div backgrounds

Need help. Thank you.

The below part i suppose lazy loads images

$self.one("appear", function() {     if (!this.loaded) {         if (settings.appear) {             var elements_left = elements.length;             settings.appear.call(self, elements_left, settings);         }         $("<img />")             .bind("load", function() {                 $self                     .hide()                     .attr("src", $self.data(settings.data_attribute))                     [settings.effect](settings.effect_speed);                 self.loaded = true;                  /* Remove image from array so it is not looped next time. */                 var temp = $.grep(elements, function(element) {                     return !element.loaded;                 });                 elements = $(temp);                  if (settings.load) {                     var elements_left = elements.length;                     settings.load.call(self, elements_left, settings);                 }             })             .attr("src", $self.data(settings.data_attribute));     } }); 

Jquery plugin lazy load

Answer 1

First you need to think off when you want to swap. For example you could switch everytime when its a div tag thats loaded. In my example i just used a extra data field "background" and whenever its set the image is applied as a background image.

Then you just have to load the Data with the created image tag. And not overwrite the img tag instead apply a css background image.

Here is a example of the code change:

if (settings.appear) {     var elements_left = elements.length;     settings.appear.call(self, elements_left, settings); } var loadImgUri; if($self.data("background"))     loadImgUri = $self.data("background"); else     loadImgUri  = $self.data(settings.data_attribute);  $("<img />")     .bind("load", function() {         $self             .hide();         if($self.data("background")){             $self.css('backgroundImage', 'url('+$self.data("background")+')');         }else             $self.attr("src", $self.data(settings.data_attribute))          $self[settings.effect](settings.effect_speed);          self.loaded = true;          /* Remove image from array so it is not looped next time. */         var temp = $.grep(elements, function(element) {             return !element.loaded;         });         elements = $(temp);          if (settings.load) {             var elements_left = elements.length;             settings.load.call(self, elements_left, settings);         }     })     .attr("src", loadImgUri ); } 

the loading stays the same

$("#divToLoad").lazyload(); 

and in this example you need to modify the html code like this:

<div data-background="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" id="divToLoad" />​ 

but it would also work if you change the switch to div tags and then you you could work with the "data-original" attribute.

Here's an fiddle example: http://jsfiddle.net/dtm3k/1/