espere hasta que se carguen las imágenes en segundo plano (css)

Question

Digamos que tenemos una presentación de diapositivas de imágenes. las miniaturas de esas imágenes se muestran en envoltorio div con un control deslizante (que he creado con Jquery) y cada imagen se incluye en un <li> con un conjunto de fondos CSS, que por supuesto representa la imagen. Elegí usar una imagen de fondo para un tema de diseño porque todos son diferentes en tamaño y relación de aspecto.

Las imágenes provienen de un archivo db y se crean dinámicamente.

Lo que yo quiero hacer es:

muestran un mensaje de "carga" sobre cada <li> y esperar hasta que el fondo (imagen) se carga en la memoria caché y luego lo muestran con una fadeIn. La única forma que se me ocurre (no es que pueda, ya que no soy muy seguro de cómo y si es factible) es:

• temporalmente desarmar el fondo para cada <li> mientras muestra el mensaje "carga"
• hacer un bucle para cada fondo para obtener el URL de la imagen
• utilizar la función $ .get para cargarlo y luego hacer lo que quiera después de cargar

al lado de lo factible, esto implicaría que cargarían en secuencia, por lo que si uno no se carga por algunos reas en el guión nunca continuará!

He visto algunos sitios que usan JS para cargar imágenes solo cuando es visible por el navegador, tal vez este podría ser el mismo caso que estoy buscando, ya que estoy usando un scroller y solo una parte del las imágenes se muestran a la vez y cuando la página carga

Answer 1

Bueno, creo que las cosas pueden ser más simples si solo usas etiquetas img, pero si quieres usar imágenes de fondo, entonces solo podría darte una vuelta atrás.

El truco es crear una nueva imagen (usando the Javascript image object), y asegúrese de que esté cargada, pero esta imagen no se muestra. Una vez que la imagen está cargada y en la memoria caché, esa imagen estará disponible como una imagen de fondo en su galería.

Por lo tanto, todo lo que tiene que hacer es asegurarse de que solo cambie la imagen de fondo de LI de una imagen después de que se cargue la imagen correspondiente. Puede cargar todos los LI s inicialmente con una imagen de "carga" predeterminada.

lo que el código sería algo así como:

HTML (los style definiciones imagen de la carga para podría estar en su hoja de estilos externa):

<ul> 
<li id="pic1" style="background-image:url('images/loading.gif')"></li> 
<li id="pic2" style="background-image:url('images/loading.gif')"></li> 
<li id="pic3" style="background-image:url('images/loading.gif')"></li> 
... 
</ul> 

Su jQuery/Javascript:

var img = new Array(); 

// The following would be in some sort of loop or array iterator: 

var num = [NUMBER] // You'd use this number to keep track of multiple images. 
    // You could also do this by using $("ul>li").each() and using the index # 

img[num] = new Image(); 

    // Specify the source for the image 
var imgSource = "http://yourimage.com/example.jpg"; 

    // only append the corresponding LI after the image is loaded 
img[num].onload = function() { 
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')"); 
}; 

img[num].src = imgSource;​ 

Debería tener los CSS/id apropiados para cada LI, y tendría que adaptar lo anterior al bucle o función Usas para mostrar tu galería.

Here's a jsFiddle example. (para fines de prueba, es una imagen grande, por lo que lleva un tiempo cargar).

Answer 2

Bueno, creo que tal vez estás haciendo las cosas demasiado complicadas. No estoy seguro de por qué estás usando el fondo CSS cuando las imágenes podrían estar dentro de una etiqueta. Usted dice que la razón es porque sus imágenes se crean dinámicamente ... y no lo entiendo.

Lo que podría hacer es crear una página que devuelve las imágenes, tal vez usted podría utilizar algún parámetro ... algo así como el tamaño de la imagen:

http://www.mysite.com/create_image.php?size=200x100&id=img1 

entonces todo lo que tiene que hacer es poner este URL en el interior el SRC de la etiqueta img ... Si lo desea, puede precargar la imagen cuando la página se carga ... o cuando se mueve su control deslizante

O tal vez no entendí su problema = D

Answer 3

La solución que uso de esto es tener dos capas de elementos.

Una capa es una carcasa que tiene el símbolo de carga de fondo como fondo. Esto siempre se ve. Luego, en una segunda capa de arriba, coloco el elemento con las imágenes y uso una función jQuery .ready() con .delay() y .fade().

Debido a que este es enrevesado para explicar, voy a mostrar lo que hago:

<!-- Page Elements --> 

    <div id="background-loading"> // Background image of spinner 
     <div id="slider-case"> // Container of slider 
     <ul id="slider-content"> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
     </ul> 
     </div> 
    </div> 

    <!-- Script --> 

    // Somewhere you have a script that manages the slider 
    // Below is the loading animation/image manager 
    $(document).ready(function() { 
    $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ 
     $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear'); 
     $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){}); 
    }); 
    }); 

El retraso y la decoloración hace que el tiempo de carga parece intencional, mientras que el .ready() esperará hasta que el elemento está completamente cargado.

Al tener una capa de fondo separada, no tiene que preocuparse por manipular nada además del control deslizante. Para agregar un efecto adicional, puede hacer una devolución de llamada a la carga de imagen que se desvanece a la animación de carga.

Answer 4

Busca elementos con atributo src o propiedad backgroundImage css y llama a una función de acción cuando se cargan sus imágenes.

/** 
* Load and wait for loading images. 
*/ 
function loadImages(images, action){ 
    var loaded_images = 0; 
    var bad_tags = 0;   

    $(images).each(function() { 
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display")); 
     var image = new Image(); 
     var src = $(this).attr("src"); 
     var backgroundImage = $(this).css("backgroundImage");    
     // Search for css background style 
     if(src == undefined && backgroundImage != "none"){ 
      var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;     
      src = pattern.exec(backgroundImage)[1];     
     }else{ 
      bad_tags++; 
     } 
     // Load images 
     $(image).load(function() { 
      loaded_images++;     
      if(loaded_images == ($(images).length - bad_tags)) 
       action(); 
     }) 
     .attr("src", src); 
    }); 
} 

Answer 5

Puede hacer un truco CSS en lugar de un código javascript largo.
Aquí puede hacerlo de esta manera:

HTML:

<ul id="slideshow-container"> 
    <li><div id="image1"></div></li> 
    <li><div id="image2"></div></li> 
    <li><div id="image3"></div></li> 
    <li><div id="image4"></div></li> 
</ul> 

CSS:

#slideshow-container>li{ 
    background-image:url('loading.gif') 
} 

#slideshow-container>li>div{ 
    width:100%; 
    height:100%; 
} 

#slideshow-container>li>div{ 
    background-color:transparent; 
} 

#image1{ 
    background-image:url('image1.jpg'); 
} 

#image2{ 
    background-image:url('image2.jpg'); 
} 

#image3{ 
    background-image:url('image3.jpg'); 
} 

#image4{ 
    background-image:url('image4.jpg'); 
} 

Explicación:
Las imágenes de la presentación de diapositivas serán el fondo de div contenido en el li. Hasta que se carguen las imágenes, el fondo será transparente, lo que mostrará el fondo del li que es el gif de carga animado.
En términos simples, se mostrará la carga de la imagen de li hasta que se cargue la imagen de la presentación de diapositivas contenida en el div.