如何实现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插件懒加载

- Furkan Gözükara

---

试试https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/ - Cezary Tomczyk

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"属性。

这里有一个jsfiddle示例：http://jsfiddle.net/dtm3k/1/

- fehrlich

---

只是想指出那个JS中有很多实例，其中自定义选择器函数被使用错误的名称调用。像“rightoffold”应该改为“rightofscreen”。这里是一个更新后的fiddle，其中所有选择器扩展函数的名称和调用都已经被更正：http://jsfiddle.net/dtm3k/93/ - ORyan

Answer 2

编辑：下面的帖子是2012年的，现在已经过时了！

我是这样做的：

<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+'")');
        });
    
    });

});

- maosmurf

---

你在哪里调用 $.lazyload() 函数？ - Pherrymason

我不亲自调用它，而是使用$(window).load()注册一个回调函数。详见https://api.jquery.com/load-event/#entry-examples - maosmurf

我看不出这个懒加载如何在页面中加载图像，如果图像的src属性在页面加载时没有填充，那么$(window).load将会触发，然后所有的图像都会一次性加载... - Pherrymason

整个页面加载完成后，包括所有文本内容、JS解释完毕。然后才会按照data-src的方式加载图片。由于浏览器对每个主机的连接数有限制，因此您不会一次性加载所有图片。 - maosmurf

我认为这并不是lazyload插件提供的相同行为。Lazyload插件仅在图像即将可见时加载它们，例如，当您向下滚动到放置这些图像的位置时。这样，如果有未显示的图像，它们就不会被加载。即使浏览器对每个主机有连接限制，它们也都将被加载，这不是懒加载。 - Pherrymason

Answer 3

去年中期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);
    });
  }
});

- zmanc

---

除了上述内容之外：https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/ - Cezary Tomczyk

除了上述之外：https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/ - undefined

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

本文介绍了一种称为“延迟加载”的技术，它可以提高网站的性能。在使用该技术时，只有当用户滚动到页面上的图片时才会加载该图片，而不是在页面加载时就加载所有图片。这可以减轻服务器的负担并加快页面加载速度。

- Barlas Apaydin

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

- shrimpwagon

Answer 6

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

Lazy 的基本用法：

HTML

<!-- 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加载，那就可以了！

要查看实际示例和更多细节，请访问此链接lazy-doc.

- Houssem ZITOUN

Answer 7

没有jQuery

HTML

背景图片：url('default-loading-image');

数据源： "image-you-want-to-load"

<div class="ajustedBackground"  style="background-image: url('default-loading-image');" data-src="image-you-want-to-load"><div>

var tablinks = document.getElementsByClassName("ajustedBackground");
    for (i = 0; i < tablinks.length; i++) {
      var lazy = tablinks[i];
      var src = lazy.dataset.src;

      lazy.style.backgroundImage =  'url("'+src+'")';
    }

.ajustedBackground{
  width: 100%;
  height: 300px;
  background-size: 100%;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  position: relative;
}

<div class="ajustedBackground"  style="background-image: url('https://monyo.az/resources/img/ezgif-6-b10ea37ef846.gif');" data-src="https://monyo.az/resources-qrcode/img/Fathir_7%201.png"><div>

查找 HTML 中所有应用了 ajustedBackground 类名的元素，并从 data-src 加载图片。

function lazyloadImages(){
    var tablinks = document.getElementsByClassName("ajustedBackground");
    for (i = 0; i < tablinks.length; i++) {
      var lazy = tablinks[i];
      var src = lazy.dataset.src;

      lazy.style.background =  'url("'+src+'")';
    }

}

- Kamran Gasimov

Answer 8

使用上述插件进行懒加载图片会使用传统的方法将监听器附加到滚动事件上，或者利用 setInterval，并且非常低效，因为每次调用 getBoundingClientRect() 都会强制浏览器重新布局整个页面，并且会给您的网站带来相当大的卡顿。相反，可以使用 Lozad.js（只有 569 字节，无依赖项），它使用 InteractionObserver 来高效地懒加载图片。

- Apoorv Saxena

---

目前这是一个不错的选择，但由于并非所有主流浏览器都支持此API，因此应提供回退到旧算法的备选方案。 - Alexander Pravdin

如果浏览器不支持IntersectionObserver，可以根据需要动态加载IntersectionObserver的Polyfill https://www.npmjs.com/package/intersection-observer - Apoorv Saxena

Answer 9

<div class="lazy" data-bg="img/bmw_m1_hood.jpg" style="width: 765px; height: 574px;"></div>
    
var lazyLoadInstance = new LazyLoad({
  load_delay: 100,
  effect : "fadeIn"
});

使用原生的lazyload https://www.npmjs.com/package/vanilla-lazyload

- Leffa

Answer 10

我必须为我的响应式网站处理这个问题。我有许多相同元素的不同背景，以适应不同的屏幕宽度。我的解决方案非常简单，将所有图像限定在CSS选择器（如“zoinked”）范围内。

逻辑：

如果用户滚动，则加载与其相关的带有背景图像的样式。 完成！

以下是我在一个名为“zoinked”的库中编写的内容，我不知道为什么叫它“zoinked”。这只是发生了，好吗？

(function(window, document, undefined) {   var Z = function() {
    this.hasScrolled = false;

    if (window.addEventListener) {
      window.addEventListener("scroll", this, false);
    } else {
      this.load();
    }   };
     Z.prototype.handleEvent = function(e) {
    if ($(window).scrollTop() > 2) {
      this.hasScrolled = true;
      window.removeEventListener("scroll", this);
      this.load();
    }   };
     Z.prototype.load = function() {
    $(document.body).addClass("zoinked");   };
     window.Zoink = Z; 
})(window, document);

对于CSS，我会将所有的样式都写成这样：

.zoinked #graphic {background-image: url(large.jpg);}

@media(max-width: 480px) {.zoinked #graphic {background-image: url(small.jpg);}}

我的技巧是在用户开始滚动时，将所有图像加载到顶部图像之后。如果您想要更多控制，可以让“zoinking”更加智能化。

- Alex Grande