precargar imágenes de CSS ocultas

Question

Estoy trabajando en una página de inicio basada en jquery con 5 o menos divs ocultos, cada uno con varias imágenes CSS de fondo.

El problema es que el navegador no carga imágenes css en el DOM hasta que se muestra la visibilidad de la capa principal, lo que hace que las imágenes se carguen lentamente cuando la capa se vuelve visible.

Soluciones Ya hemos considerado:

• sprites CSS (demasiado trabajo para rediseñar para esto, y la costumbre realmente funciona cuando se muestran/ocultan divs)
• This jQuery plugin que las imágenes de fondo-carga automáticamente CSS (simplemente no funciona para mí según lo informado por muchos otros).

• precarga de las imágenes a través de JS:

  $(function() { 
  function preloadImg(image) { 
      var img = new Image(); 
      img.src = image; 
  } 
  
  preloadImg('/images/home/search_bg_selected.png'); 
  }); 
  

  Esta solución parece cargar la imagen en el DOM dos veces ... una vez cuando se carga el js, y luego de nuevo cuando la capa div que carga se hace visible ... por lo tanto, realiza 2 llamadas HTTP, por lo que no funciona.

¿Alguna otra solución para este problema que me falta?

Answer 1

Cuando dijo otras formas, ¿se refiere a las que no usan Javascript?

<script language="JavaScript"> 
function preloader() 
{ 
    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]="image1.jpg" 
    images[1]="image2.jpg" 
    images[2]="image3.jpg" 
    images[3]="image4.jpg" 

    // start preloading 
    for(i=0; i<=3; i++) 
    { 
      imageObj.src=images[i]; 
    } 
} 
</script> 

Otros ninguno maneras JS son para colocar algo de HTML en su página en algún lugar por lo que no ha visto:

<image src="picture.jpg" width="1" height="1" border="0"> 

o HTML ...

<img src="images/arrow-down.png" class="hiddenPic" /> 

... y CSS. ..

.hiddenPic { 
    height:1px; 
    width:1px; 
} 

Más métodos de JavaScript:

function preload(images) { 
    if (document.images) { 
     var i = 0; 
     var imageArray = new Array(); 
     imageArray = images.split(','); 
     var imageObj = new Image(); 
     for(i=0; i<=imageArray.length-1; i++) { 
      //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images) 
      imageObj.src=images[i]; 
     } 
    } 
} 

luego cargar las imágenes usando algo como:

<script type="text/javascript"> 
preload('image1.jpg,image2.jpg,image3.jpg'); 
</script> 

Answer 2

"Esta solución parece cargar la imagen en el DOM dos veces ... una vez cuando el js lo carga, y luego otra vez cuando la capa div que lo carga se vuelve visible ... por lo que hace 2 llamadas http, por lo tanto no funciona "

La segunda solicitud http debe responder en un 304 (no modificado), así que supongo que está bien? Otra de las opciones es para cargar la imagen a través de jQuery y luego insertar como imagen de fondo en línea a través de DOM, como:

jQuery.fn.insertPreload = function(src) { 
    return this.each(function() { 
     var $this = $(this); 
     $(new Image()).load(function(e) { 
      $this.css('backgroundImage','url('+src+')'); 
     }).attr('src',src); 
    }); 
}; 

$('div').insertPreload('[huge image source]'); 

Answer 3

URL codificación duras como las otras soluciones sugieren lugares un impuesto sobre el mantenimiento del código. Es relativamente fácil evitar esto y hacer una solución general con jQuery.

Esta función selecciona todos los elementos ocultos, comprueba si tienen imágenes de fondo y luego los carga en un elemento ficticio oculto.

$(':hidden').each(function() { 
    //checks for background-image tab 
    var backgroundImage = $(this).css("background-image"); 
    if (backgroundImage != 'none') { 
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
    $('<img/>')[0].src = imgUrl; 
    } 
}); 

Answer 4

La precarga de CSS es fácil.

Ejemplo:

body:after{ 
    display:none; 
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) 
} 

Answer 5

Navegadores están empezando a apoyar prefetch y preload propiedades de rel="..." la propiedad del elemento <link>.

Addy Osmani de post about the preload and prefetch properties es excelente y se describe cuándo se deben utilizar:

La precarga es uno de los primeros fetch instrucciones al navegador para solicitar un recurso necesario para una página (guiones clave, Fuentes web, imágenes héroe)

Prefetch sirve para un caso de uso ligeramente diferente: una navegación futura por el usuario (por ejemplo, entre vistas o páginas) donde los recursos buscados y las solicitudes deben persistir en todas las navegaciones. Si la Página A inicia una solicitud de búsqueda previa de para los recursos críticos necesarios para la Página B, las solicitudes de recursos y navegación críticos de se pueden completar en el paralelo . Si usamos precarga para este caso de uso, sería cancelado inmediatamente en la descarga de la Página A.

El elemento se utiliza de esta manera:

<link rel="preload" as="image" href="https://your.url.com/yourimage.jpg" /> 

Estoy diseñando un formulario con múltiples pasos, y cada uno tiene una imagen de fondo diferente. Este patrón resuelve un "parpadeo" entre los pasos a medida que Chrome descarga la siguiente imagen de fondo.