如何延迟加载的div背景图片 [英] How to Lazy Load div background images

问题描述

正如你们许多人知道它被广泛用于延迟加载图像。

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

现在我想用这个作为延迟加载的div的背景图片。

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

我怎样才能做到这一点？

How can i do that ?

我目前能够使用 http://www.appelsiini.net/projects/lazyload 该插件

所以我需要修改它的方式，它会与格背景的工作。

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

需要帮助。谢谢你。

以下部分我想偷懒加载图像

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插件延迟加载

Jquery plugin lazy load

推荐答案

首先，你需要，当你想换去思考了。例如，当它是一个div标签加载那你可以切换每次。在我的例子，我只是使用了额外的数据字段背景，每当其设定的图像被应用为背景图像。

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.

然后你只需在创建图像标记加载数据。而不是覆盖img标签，而不是应用CSS背景图片。

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.

下面是code修改的例子：

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 );
}

加载保持不变。

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

在这个例子中，你需要修改HTML code是这样的：

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" />​

但如果你改变DIV标签交换它也将工作，然后你可以用数据原属性工作。

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

下面是一个小提琴例如： http://jsfiddle.net/dtm3k/1/

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

这篇关于如何延迟加载的div背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！