How to Lazy Load div background images

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;, elements_left, settings);
var loadImgUri;
    loadImgUri = $"background");
    loadImgUri  = $;

$("<img />")
    .bind("load", function() {
            $self.css('backgroundImage', 'url('+$"background")+')');
            $self.attr("src", $


        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;
  , elements_left, settings);
    .attr("src", loadImgUri );

the loading stays the same


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

<div data-background="" 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: