javascript - 如何延迟加载 div 背景图像

Question

众所周知，它广泛用于延迟加载图像。

现在我想将其用作延迟加载 div 背景图像。

我该怎么做？

我目前可以使用 http://www.appelsiini.net/projects/lazyload那个插件

所以我需要修改它以使其与 div 背景一起工作

需要帮助。谢谢。

下面的部分我想是延迟加载图片

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

Answer 1

首先，当你想交换时，你需要考虑一下。例如，您可以在每次加载 div 标签时切换。在我的示例中，我只是使用了一个额外的数据字段“背景”，每当它的设置图像被应用为背景图像。

然后您只需使用创建的图像标签加载数据。并且不覆盖 img 标签，而是应用 css 背景图片。

这是代码更改的示例:

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代码:

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

但如果您将开关更改为 div 标签，它也可以工作，然后您可以使用“data-original”属性。

这是一个 fiddle 示例:http://jsfiddle.net/dtm3k/1/