javascript - example - lazy load html
Cómo las imágenes de fondo de Lazy Load Load div (7)
Las imágenes de carga diferida utilizando los complementos mencionados anteriormente utilizan la forma convencional de vincular el oyente a eventos de desplazamiento o haciendo uso de setInterval y es altamente no funcional ya que cada llamada a getBoundingClientRect () obliga al navegador a rediseñar la página completa e introducirá un considerable jank a su sitio web
Use Lozad.js (solo 569 bytes sin dependencias), que usa InteractionObserver para cargar imágenes de manera perezosa.
Como muchos de ustedes saben, es ampliamente utilizado para cargar imágenes perezosas.
Ahora quiero usar esto como imágenes de fondo de carga lenta perezoso.
Cómo puedo hacer eso ?
Actualmente puedo usar http://www.appelsiini.net/projects/lazyload ese complemento
Entonces necesito modificarlo de forma que funcione con fondos div
Necesitas ayuda. Gracias.
La parte de abajo supongo que las imágenes de cargas perezosas
$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 plugin lazy load
Creé un complemento de "carga lenta" que podría ser útil. Esta es una forma posible de hacer el trabajo en su caso:
$(''img'').lazyloadanything({
''onLoad'': function(e, LLobj) {
var $img = LLobj.$element;
var src = $img.attr(''data-src'');
$img.css(''background-image'', ''url("''+src+''")'');
}
});
Es simple como el ejemplo de maosmurf, pero aún le da la funcionalidad de "carga lenta" de activación de eventos cuando el elemento aparece a la vista.
Encontré esto en el sitio oficial del complemento:
<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"
});
Fuente: http://www.appelsiini.net/projects/lazyload/enabled_background.html
Lo hago así:
<div class="lazyload" style="width: 1000px; height: 600px" data-src="%s">
<img class="spinner" src="spinner.gif"/>
</div>
y cargar con
$(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+''")'');
});
});
});
Primero debes pensar cuando quieras intercambiar. Por ejemplo, puede cambiar cada vez que se carga una etiqueta de div. En mi ejemplo, acabo de utilizar un campo de datos extra "fondo" y cada vez que se establece la imagen se aplica como una imagen de fondo.
Entonces solo tiene que cargar los datos con la etiqueta de imagen creada. Y no sobrescribir la etiqueta img en su lugar aplicar una imagen de fondo CSS.
Aquí hay un ejemplo del cambio de código:
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 );
}
la carga permanece igual
$("#divToLoad").lazyload();
y en este ejemplo necesita modificar el código html de esta manera:
<div data-background="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" id="divToLoad" />
pero también funcionaría si cambias el interruptor a etiquetas div y luego podrías trabajar con el atributo "original de datos".
Aquí hay un ejemplo de violín: http://jsfiddle.net/dtm3k/1/
Sé que no está relacionado con la carga de la imagen, pero aquí lo que hice en una de las pruebas de entrevista de trabajo.
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);
}
}
});
Estoy ordenando los datos por Fecha y luego haciendo la carga lenta en la función de desplazamiento de ventana.
Espero que ayude :)
Tuve que lidiar con esto para mi sitio web receptivo . Tengo muchos fondos diferentes para los mismos elementos para tratar diferentes anchos de pantalla. Mi solución es muy simple, mantenga todas sus imágenes en un selector css, como "zoinked".
La lógica:
Si el usuario se desplaza, cargue estilos con imágenes de fondo asociadas a ellos. ¡Hecho!
Esto es lo que escribí en una biblioteca que llamo "zoinked". No sé por qué. Simplemente sucedió bien?
(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);
Para CSS, tendré todos mis estilos de esta manera:
.zoinked #graphic {background-image: url(large.jpg);}
@media(max-width: 480px) {.zoinked #graphic {background-image: url(small.jpg);}}
Mi técnica con esto es cargar todas las imágenes después de las superiores tan pronto como el usuario comience a desplazarse. Si quisieras más control, podrías hacer que el "zoinking" sea más inteligente.