title: How to Lazy Load div background images
body: <p>As many of you know it is widely used to lazy load images.</p>
  
  <p>Now i want to use this as lazy load div background images.</p>
  
  <p>How can i do that ?</p>
  
  <p>I am currently able to use <a href="http://www.appelsiini.net/projects/lazyload">http://www.appelsiini.net/projects/lazyload</a> that plugin</p>
  
  <p>So i need to modify it in a way that it will work with div backgrounds</p>
  
  <p>Need help. Thank you.</p>
  
  <p>The below part i suppose lazy loads images</p>
  
  <pre><code>$self.one("appear", function() {
      if (!this.loaded) {
          if (settings.appear) {
              var elements_left = elements.length;
              settings.appear.call(self, elements_left, settings);
          }
          $("&lt;img /&gt;")
              .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));
      }
  });
  </code></pre>
  
  <p>Jquery plugin lazy load</p>