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);
}
$("<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タグが読み込まれるたびに切り替えることができます。私の例では、追加のデータフィールド「背景」を使用しましたが、その設定のたびに画像が背景画像として適用されます。
次に、作成した画像タグでデータをロードするだけです。 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/
私はこのようにします：
<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の例のようにシンプルですが、要素が表示されたときにイベントを起動する「遅延ロード」機能を提供します。
画像の読み込みとは関係ないことはわかっていますが、ここでは面接テストの1つで行ったことを説明します。
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);
}
}
});
データを日付でソートし、ウィンドウスクロール機能で遅延ロードを実行しています。
私はそれが役立つことを願っています:)
レスポンシブWebサイトでこれに対処する必要がありました。多くの同じ要素の異なる背景があり、異なる画面幅に対応しています。私の解決策は非常に簡単です。すべての画像を「zoinked」のようなcssセレクターにスコープします。
ロジック：
ユーザーがスクロールする場合、関連する背景画像を含むスタイルをロードします。できた！
これが私が「ゾーキング」と呼ぶ図書館に書いたものです。大丈夫？
(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);}}
これに関する私のテクニックは、ユーザーがスクロールを開始するとすぐに、一番上の画像の後にすべての画像をロードすることです。より制御したい場合は、「ゾーキング」をよりインテリジェントにすることができます。
上記のプラグインを使用した画像の遅延読み込みは、リスナーをスクロールイベントにアタッチする従来の方法を使用するか、setIntervalを使用し、getBoundingClientRect（）を呼び出すたびにブラウザーを強制的に re-layout ページ全体に表示され、ウェブサイトにかなりの迷惑がかかります。
Lozad.js（依存関係のない569バイトのみ）を使用します。これは InteractionObserver を使用して遅延しますイメージをパフォーマンス的にロードします。