precargar imágenes grandes de galería / deslizador en HTML

Tengo imágenes grandes y anchas dentro de una página de portafolio. Las imágenes se guardan “progresivas” y se cargan bien.

Me preguntaba si hay una manera de cargar esas imágenes para que aparezcan más rápidas y suaves. ¿O tal vez hay una manera de precargar todas las demás páginas e imágenes en el caché para que al menos todas las páginas siguientes después de la primera se vean fluidas y rápidas? Lo que sea que ayude a hacer que las páginas se carguen más rápido y más suave.

¿Alguna sugerencia?

Cada imagen consta de una variedad de imágenes, todas ellas dentro de una imagen ancha (preparada en PSD) y el visitante puede desplazarse hacia la izquierda y hacia la derecha para solicitar que la imagen correspondiente aparezca en el centro. Desafortunadamente, sacrificar la calidad de la imagen o reducirla no es una opción aquí.

Sé que hay publicaciones aquí sobre precargas de imágenes y material publicitario, pero no encuentro ninguno que funcione con la imagen incrustada en el código HTML.

Por favor, tenga merci, soy un principiante en CSS y Javascript, así que cuanto más simple, más probable es que lo entienda. Me temo que dividir las imágenes en instancias individuales (hacer que sea una fila de imágenes en lugar de una imagen completa), colocarlas en un div flotado y cambiar el código Javascript respectivo podría ser demasiado desafiante para mí, ¿verdad …? ¿De qué otra manera podría hacer eso?

¡Apreciado!

Esto es lo que tengo (supongo que sería excesivo publicar todo mi HTML, Javascript y CSS aquí, publicaré algunos). Las imágenes grandes se colocan dentro de la página HTML y se llaman a través de Javascript.

mira aquí

imagegallery1
arrowsleft
arrowright

y

 gallery = document.getElementById('ShiftGalleryFour').style; 

Así es como cargamos las imágenes en uno de nuestros proyectos:

 preloadImages = function(imageIndex) { // Finds div element containing index (1..n) and url of image // (both stored as data attributes) var image = $(".data .image[data-index=" + imageIndex + "]"); // Creates an image (just virtually) that is not embedded to HTML. // Its source is the url of the image that is to be preloaded var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url")); // Bind an event to the "virtual" image to start preloading next image when // this one is done preloadedImage.load(function() { // Start preloading the next one preloadImages(imageIndex + 1); }); } // Start preloading the first image preloadImages(1) 

En su caso, esto resuelve solo una parte del problema: la precarga.

Veo que incluyes todas las imágenes en html como tags img . Si desea lograr un mejor rendimiento, no coloque ninguna etiqueta img en su html de la galería. Solo div tags que se convertirán en los futuros contenedores de tus imágenes. Estos divs pueden tener índices y contener atributos de datos con urls de imágenes (como se ve en mi ejemplo). Cuando su página se carga, comience el proceso de precarga. Cuando se carga una “imagen virtual”. Cree una nueva etiqueta de imagen dentro de su contenedor y comience a cargar la siguiente imagen.

Esto definitivamente cortará el tiempo de descarga de tu página.

Mi ejemplo usa jQuery que simplifica el script. El javascript puro sería más complicado.

ACTUALIZAR:

Así es como puede funcionar el ejemplo de precarga.

HTML

Digamos que tiene 4 imágenes y todas tienen su contenedor, una división en la que se colocará la imagen individual.

 

JavaScript

Una vez cargado el documento, puede comenzar el proceso de precarga. Comienzas precargando la primera imagen. Una vez cargado éste, lo agregas a su contenedor y activas la precarga de la siguiente imagen. También se return llamado si todas las imágenes están cargadas y no se encuentra ningún contenedor.

 preloadImages = function(imageIndex) { var imageContainer = $(".images .image[data-index=" + imageIndex + "]"); return if imageContainer.length === 0 var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url")); preloadedImage.load(function() { imageContainer.append(preloadedImage); preloadImages(imageIndex + 1); }); } $(document).ready(function(){ preloadImages(1); }); 

Con suerte se entiende la idea.

    Intereting Posts