如何懒惰加载div背景图像

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

现在我想用它作为延迟加载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); } $("") .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); $("") .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-original”属性。

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

Answer 2

我是这样做的：

并加载

 $(window).load(function(){ $('.lazyload').each(function() { var lazy = $(this); var src = lazy.attr('data-src'); $('').attr('src', src).load(function(){ lazy.find('img.spinner').remove(); lazy.css('background-image', 'url("'+src+'")'); }); }); }); 

Answer 3

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

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

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

Answer 4

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

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

它就像maosmurf的例子一样简单，但是当元素进入视图时，它仍然为您提供事件触发的“延迟加载”function。

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

Answer 5

我知道它与图像负载无关，但是我在其中一个面试中做了什么。

HTML

 
Scroll to see News (Newest First) 

CSS

 article { margin-top: 500px; opacity: 0; border: 2px solid #864488; padding: 5px 10px 10px 5px; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #DCD3E8), color-stop(1, #BCA3CC) ); background-image: -o-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%); background-image: -moz-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%); background-image: -webkit-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%); background-image: -ms-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%); background-image: linear-gradient(to bottom, #DCD3E8 0%, #BCA3CC 100%); color: gray; font-family: arial; } article h4 { font-family: "Times New Roman"; margin: 5px 1px; } .main-news { border: 5px double gray; padding: 15px; } 

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 += '
Published on: ' + val.published + '
' + val.title + '
'; 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); } } }); 

我按日期排序数据，然后在窗口滚动function上进行延迟加载。

我希望它有帮助:)

演示

Answer 6

我必须为我的响应式网站处理这个问题。 我有相同元素的许多不同背景来处理不同的屏幕宽度。 我的解决方案非常简单，将所有图像限定为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，我将拥有这样的所有样式：

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

我的技术是在用户开始滚动后立即加载顶部图像之后的所有图像。 如果你想要更多的控制，你可以让“缩放”更加智能化。

Answer 7

使用上述插件延迟加载图像使用传统的方式将侦听器附加到滚动事件或使用setInterval，并且高度不兼容，因为每次调用getBoundingClientRect（）都会强制浏览器重新布局整个页面并引入相当大的jank到你的网站。

使用Lozad.js （只有569个字节，没有依赖项），它使用InteractionObserver来延迟加载图像。