如何懒惰加载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标签时都可以切换.在我的例子中,我只使用了一个额外的数据字段"background",每当它设置时,图像被应用为背景图像.

然后,您只需使用创建的图像标记加载数据.而不是覆盖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"属性,它也可以工作.

这是一个小提琴的例子:http://jsfiddle.net/dtm3k/1/

Answer 2

去年年中2020 年 web.dev发布了一篇文章，分享了一些新方法来实现这一点IntersectionObserver，在撰写本文时，所有主要浏览器都支持该答案。这将允许您在等待图像到达视口边缘然后加载时使用非常轻量的背景图像或背景颜色占位符。

CSS

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

Answer 3

我是这样做的:

<div class="lazyload" style="width: 1000px; height: 600px" data-src="%s">
    <img class="spinner" src="spinner.gif"/>
</div>

并加载

$(window).load(function(){

    $('.lazyload').each(function() {

        var lazy = $(this);
        var src = lazy.attr('data-src');

        $('<img>').attr('src', src).load(function(){
            lazy.find('img.spinner').remove();
            lazy.css('background-image', 'url("'+src+'")');
        });

    });

});

Answer 4

我在插件的官方网站上找到了这个:

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
      effect : "fadeIn"
});

资料来源:http://www.appelsiini.net/projects/lazyload/enabled_background.html

Answer 5

我创建了一个“延迟加载”插件，可能会有所帮助。在您的情况下，这是一种完成工作的可能方法：

$('img').lazyloadanything({
    'onLoad': function(e, LLobj) {
        var $img = LLobj.$element;
        var src = $img.attr('data-src');
        $img.css('background-image', 'url("'+src+'")');
    }
});

它像maosmurf的示例一样简单，但是当元素出现时，仍然为您提供事件触发的“延迟加载”功能。

https://github.com/shrimpwagon/jquery-lazyloadanything

Answer 6

这个问题已经被问到了，但这并不意味着我们不能在 2020 年分享其他答案。这是一个很棒的 jquery 插件：jQuery Lazy

Lazy的基本用法：

超文本标记语言

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>
enter code here

JS

 $('.lazy').Lazy({
    // your configuration goes here
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    onError: function(element) {
        console.log('error loading ' + element.data('src'));
    }
});

并且您的背景图像是延迟加载的。就这样！

要查看真实示例和更多详细信息，请查看此链接lazy-doc。