Comment charger des images d'arrière-plan div paresseux
Comme beaucoup d'entre vous le savent, il est largement utilisé pour charger des images paresseuses.
Maintenant, je veux l'utiliser comme des images d'arrière-plan div paresseux.
Comment puis je faire ça ?
Je suis actuellement en mesure d'utiliser http://www.appelsiini.net/projects/lazyload ce plugin
J'ai donc besoin de le modifier de manière à ce qu'il fonctionne avec des arrière-plans div
Besoin d'aide pour. Merci.
La partie ci-dessous, je suppose que les images de chargement paresseux
$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));
}
});
Chargement paresseux du plugin Jquery
Vous devez d'abord réfléchir lorsque vous souhaitez échanger. Par exemple, vous pouvez changer à chaque fois que sa balise div est chargée. Dans mon exemple, je viens d'utiliser un champ de données supplémentaire "fond" et chaque fois que son ensemble l'image est appliquée comme image de fond.
Ensuite, il vous suffit de charger les données avec la balise d'image créée. Et ne remplacez pas la balise img à la place, appliquez une image d'arrière-plan CSS.
Voici un exemple de changement de code:
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 );
}
le chargement reste le même
$("#divToLoad").lazyload();
et dans cet exemple, vous devez modifier le code html comme ceci:
<div data-background="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" id="divToLoad" />
mais cela fonctionnerait également si vous changez le commutateur en balises div et vous pourriez alors travailler avec l'attribut "data-original".
Voici un exemple de violon: http://jsfiddle.net/dtm3k/1/
Je le fais comme ça:
<div class="lazyload" style="width: 1000px; height: 600px" data-src="%s">
<img class="spinner" src="spinner.gif"/>
</div>
et charger avec
$(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+'")');
});
});
});
Je l'ai trouvé sur le site officiel du plugin:
<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"
});
Source: http://www.appelsiini.net/projects/lazyload/enabled_background.html
J'ai créé un plugin "chargement paresseux" qui pourrait aider. Voici un moyen possible de faire le travail avec dans votre cas:
$('img').lazyloadanything({
'onLoad': function(e, LLobj) {
var $img = LLobj.$element;
var src = $img.attr('data-src');
$img.css('background-image', 'url("'+src+'")');
}
});
Il est simple comme l'exemple de maosmurf mais vous offre toujours la fonctionnalité de "chargement paresseux" du déclenchement d'événement lorsque l'élément apparaît.
Je sais que ce n'est pas lié à la charge d'image, mais voici ce que j'ai fait dans l'un des tests d'entretien d'embauche.
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);
}
}
});
Je trie les données par date, puis je fais un chargement paresseux sur la fonction de défilement de la fenêtre.
J'espère que ça aide :)
J'ai dû faire face à cela pour mon site Web réactif. J'ai beaucoup arrière-plans différents pour les mêmes éléments pour gérer différentes largeurs d'écran. Ma solution est très simple, conservez toutes vos images dans un sélecteur css, comme "zoinked".
La logique:
Si l'utilisateur défile, chargez les styles avec des images d'arrière-plan qui leur sont associées. Terminé!
Voici ce que j'ai écrit dans une bibliothèque que j'appelle "zoinked", je ne sais pas pourquoi. C'est juste arrivé ok?
(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);
Pour le CSS, j'aurai tous mes styles comme ceci:
.zoinked #graphic {background-image: url(large.jpg);}
@media(max-width: 480px) {.zoinked #graphic {background-image: url(small.jpg);}}
Ma technique consiste à charger toutes les images après les premières dès que l'utilisateur commence à faire défiler. Si vous vouliez plus de contrôle, vous pourriez rendre le "zoinking" plus intelligent.
Le chargement d'images paresseuses à l'aide des plugins mentionnés ci-dessus utilise un moyen conventionnel d'attacher l'écouteur pour faire défiler les événements ou en utilisant setInterval et est très peu performant car chaque appel à getBoundingClientRect () force le navigateur à re-layout the page entière et introduira un brin considérable sur votre site Web.
Utilisez Lozad.js (seulement 569 octets sans dépendances), qui utilise InteractionObserver pour paresseux charger les images de manière performante.