你们中许多人都知道它广泛用于延迟加载图像。
现在我想将其用作延迟加载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插件延迟加载
首先，当您要交换时，您需要考虑一下。例如，您可以在加载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标签，然后也可以使用“数据原始”属性，它也可以使用。
这是一个小提琴示例：http://jsfiddle.net/dtm3k/1/
我这样做：
<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+'")');
});
});
});
我在插件的官方网站上找到了它：
<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
我创建了一个“延迟加载”插件，可能会有所帮助。在您的情况下，这是一种完成工作的可能方法：
$('img').lazyloadanything({
'onLoad': function(e, LLobj) {
var $img = LLobj.$element;
var src = $img.attr('data-src');
$img.css('background-image', 'url("'+src+'")');
}
});
它像maosmurf的例子一样简单，但是当元素出现时，仍然为您提供事件触发的“延迟加载”功能。
我不得不为我的[[响应网站处理。我有许多相同元素的不同背景来处理不同的屏幕宽度。我的解决方案非常简单，将所有图像限制在一个css选择器范围内，例如“ 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);}}
我的技术是在用户开始滚动后立即加载所有图像，紧随其后。如果您想要更多控制，可以使“缩放”更加智能。
HTML
<div id="news-feed">Scroll to see News (Newest First)</div>
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 += '<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); } } });
我正在按日期对数据进行排序，然后在窗口滚动功能上进行延迟加载。我希望这会有所帮助：）
使用上述插件延迟加载图像时，会使用常规方法将侦听器附加到滚动事件或通过使用setInterval，并且由于每次调用getBoundingClientRect（）都会迫使浏览器将整个页面re-layout强制执行，因此效果极差对您的网站相当不利。
使用
Lozad.js（仅569个字节，没有依赖性），它使用InteractionObserver来懒惰地加载图像。
懒惰的基本用法：
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-doc。