Javascript 如何延迟加载div背景图像

正如许多人所知，它广泛用于延迟加载图像

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

我该怎么做

我目前能够使用该插件

因此，我需要修改它的方式，它将与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));
    }
});

$self.one（“出现”，函数（）{
如果（！this.loaded）{
如果（显示设置）{
var elements_left=elements.length；
设置。显示。调用（self、elements\u left、settings）；
}
$("
Jquery plugin lazy load
首先，您需要考虑何时需要交换。例如，每次加载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 );
}

在本例中，您需要修改如下html代码：

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

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

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

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

​

但是，如果您将开关更改为div标记，然后可以使用“dataoriginal”属性，那么它也可以工作

这里有一个小提琴的例子：
我是这样做的：

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

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

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

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



装载

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

    });

});

$（窗口）.load（函数（）{
$（'.lazyload'）。每个（函数（）{
var lazy=$（这是）；
var src=lazy.attr（'data-src'）；
$（'我已经创建了一个“延迟加载”插件，它可能会有所帮助。在您的情况下，以下是一种可能的方法来完成这项工作：

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

它很简单，就像Maosurf的例子一样，但是当元素进入视图时，仍然提供了事件触发的“延迟加载”功能

我必须为我的响应式网站处理这个问题。我有许多不同的背景，用于相同的元素来处理不同的屏幕宽度。我的解决方案非常简单，将所有图像的范围限制在css选择器上，如“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，我的所有样式如下：

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

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

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

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

我的技巧是在用户开始滚动时，将所有图像加载到最上面的图像之后。如果您想要更多的控制，您可以使“zoinking”更智能。
我在插件的官方网站上发现：

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


$（“div.lazy”）.lazyload({
效果：“法丹”
});

来源：
我知道这与图像加载无关，但这里是我在一次面试测试中所做的

HTML

JavaScript

var newsData,
    SortData = '',
    i = 1;

$.getJSON("http://www.stellarbiotechnologies.com/media/press-releases/json", function(data) {

   newsData = data.news;

   function SortByDate(x,y) {
     return ((x.published == y.published) ? 0 : ((x.published < y.published) ? 1 : -1 ));
   }

   var sortedNewsData = newsData.sort(SortByDate);

   $.each( sortedNewsData, function( key, val ) {
     SortData += '<article id="article' + i + '"><h4>Published on: ' + val.published + '</h4><div  class="main-news">' + val.title + '</div></article>';
     i++;    
   });

   $('#news-feed').append(SortData);
});

$(window).scroll(function() {

   var $window = $(window),
       wH = $window.height(),
       wS = $window.scrollTop() + 1

   for (var j=0; j<$('article').length;j++) {
      var eT = $('#article' + j ).offset().top,
          eH = $('#article' + j ).outerHeight();

          if (wS > ((eT + eH) - (wH))) {
             $('#article' + j ).animate({'opacity': '1'}, 500);
          }
    }

});

var newsData，
SortData=“”，
i=1；
$.getJSON（“http://www.stellarbiotechnologies.com/media/press-releases/json，函数（数据）{
newsData=data.news；
函数SortByDate（x，y）{
返回（（x.published==y.published）？0:（（x.published

$（'[data src]'）。每个（函数（）{
变量$image\u place\u holder\u element=$（此）；
var image_url=$（this.data（'src'）；
$（“”）。加载（图像url、函数（响应、状态、xhr）{
如果（！（状态==“错误”））{
$image\u place\u holder\u element.removeClass（'image-placeholder'）；
$image\u place\u holder\u element.attr（'src'，image\u url）；
}
}).remove（）；
});

当然，我使用并修改了一些堆栈答案。希望它能帮助别人。
去年中，2020发布了一篇文章，分享了一些新的方法，使用新的
IntersectionObserver
，在撰写此答案时，所有主要浏览器都支持它。这将允许您使用非常轻量级的背景图像，或背景色占位符，等待图像到达视口边缘，然后加载图像

CSS

.lazy后台{
背景图像：url（“hero placeholder.jpg”）；/*占位符图像*/
}
.lazy-background.visible{
背景图片：url（“hero.jpg”）；/*最终图片*/
}

Javascript

document.addEventListener（“DOMContentLoaded”，function（））{
var lazyBackgrounds=[].slice.call（document.queryselectoral（“.lazy background”）；
if（窗口中的“IntersectionObserver”）{
让lazyBackgroundObserver=新的IntersectionObserver（函数（条目，观察者）{
entries.forEach（函数（entry）{
if（输入。isIntersecting）{
entry.target.classList.add（“可见”）；
lazyBackgroundObserver.unobserve（entry.target）；
}
});
});
forEach（函数（lazyBackground）{
懒散的背景观察者。观察（懒散的背景）；
});
}
});
我只是想指出，该小提琴中的JS有许多实例