Basado en @Weston la respuesta de , he creado una solución jQuery más general, básicamente puedes copiar y pegar JS y CSS y concentrarte en la parte HTML;)
CSS
... para garantizar que las imágenes sean apenas visibles durante la carga
.srcSet{
position: fixed;
z-index: 0;
z-index: -1;
z-index: -100;
}
JS / jQuery
Este script pasará por todas las imágenes que tienen srcSet
clase y vinculará el load
evento que toma currentSrc
(o src
si no es compatible) y lo pondrá como background-image
CSS al padre más cercano con bgFromSrcSet
clase.
¡Eso en sí mismo no sería suficiente! Por lo tanto, también coloca un verificador de intervalo en elwindow
load
evento para probar si los eventos de carga se han completado, si no, los activa. (Elimg
load
evento a menudo se activa solo en la primera carga , en las siguientes cargas, la fuente de la imagen podría recuperarse de la caché, ¡ lo que hace que el evento de carga de img NO se active! )
jQuery(function($){
var $window = $(window);
var $srcSets = $('.srcSet');
$srcSets.each(function(){
var $currImg = $(this);
$currImg
.load(function(){
var img = $currImg.get(0);
var src = img.currentSrc ? img.currentSrc : img.src;
$currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");
$srcSets = $srcSets.not($currImg);
$currImg.remove();
})
;
});
$window.load(function(){
var loadChecker = setInterval(function(){
if( $srcSets.length > 0 )
$srcSets.load();
else
clearInterval(loadChecker);
}, 150);
});
});
HTML
... podría verse así:
<div class="bgFromSrcSet">
<img class="srcSet"
alt=""
src="http://example.com/something.jpeg"
srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
sizes="(max-width: 2000px) 100vw, 2000px"
>
Something else...
</div>
Nota: la clase bgFromSrcSet
debe no ajustarse a la img
misma! Solo se puede establecer en los elementos del img
árbol padre DOM.