Tengo una página con varias galerías, incluidos acordeones y controles deslizantes. El problema es que la página tarda una eternidad en cargarse. ¿Hay alguna manera de envolver una imagen en un código o aplicarle una clase para forzarla a cargar solo después de que se haya cargado todo lo demás?Retraso en la carga de imágenes con jQuery
Claro que sí. Reemplazar sus atributos img src con un "#", y añadir un atributo personalizado, algo como esto:
<img src="#" delayedsrc="http://mydomain.com/myimage.png"/ >
A continuación, agregue una línea de javascript cuando se carga la página que hace algo como esto (no probado, pero se entiende la idea):
$('img').each(function(){
$(this).attr('src', $(this).attr('delayedsrc'));
});
Mantenga una sola imagen en el código HTML de manera que el espectador tiene algo para empezar, a continuación, inyectar el resto usando jQuery con
$(document).ready(function() {
//load rest of the images
});
también puede utilizar la carga de eventos y AJAX o "cargar sobre la marcha", solo crea una función de devolución de llamada simple si se trata de una galería que gira automáticamente o carga al hacer clic.
Si está utilizando jQuery (y supongo que es así porque está etiquetado como tal) eche un vistazo al Lazy Load Plugin for jQuery. Retrasa la carga de imágenes que están fuera de la ventana gráfica hasta que el usuario se desplaza hacia ellas.
Actualización 2015: Este complemento se rompió en un punto, pero ahora funciona de nuevo. El último comentario dice mucho, pero casi lo extraño porque estaba oculto en los comentarios contraídos.
¿Mostrará las imágenes que están técnicamente dentro de la ventana gráfica solo oscurecidas? – DCD
Pruébelo y descubra :-) Es un plugin muy fácil de usar. – Erik
Desafortunadamente, ese complemento ya no se admite (del sitio) "Actualmente no se puede usar Lazy Load. No funciona con los últimos navegadores como se esperaba. Actualmente no tengo tiempo para actualizar el código. Los parches siempre son bienvenidos. usted encuentra una solución simplemente fork y envía una solicitud de extracción. ¡Gracias! " –
Una manera fácil de retrasar la carga de imágenes (e iFrames) es con una combinación de JS puro, jQuery.data() y el atributo personalizado de datos HTML5 *. El src de la imagen inicialmente puede apuntar a un GIF de carga. El atributo data- * contiene la ruta URL de la imagen que finalmente desea cargar. JS puro establece un retraso (3000 milisegundos en el ejemplo a continuación), y luego ejecuta jQuery.data(), que establece el src de la imagen para la imagen deseada.
El siguiente ejemplo se realiza en cada imagen con class = "load-delay".
vivo Ejemplo: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
CÓDIGO
JS y jQuery:
$(document).ready(function() {
setTimeout(function() {
$('.load-delay').each(function() {
var imagex = $(this);
var imgOriginal = imagex.data('original');
$(imagex).attr('src', imgOriginal);
});
}, 3000);
});
HTML y jQuery Biblioteca:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h1>Loading-Delayed Image</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
Eso hace el truco maravillosamente sin ningún complemento de "carga lenta" o similar, ideal para sitios de una sola página que no tienen que desplazarse, donde toda interacción tiene lugar por encima del doblez, por así decirlo. ¡Muy apreciado! – Systembolaget
Astuto, eso puede ser justo lo que necesito. – DCD
Es posible que deba hacer que sea un blank.gif en lugar de # para mantener el IE feliz, pero debería funcionar. – jvenema
Me gusta, buen enfoque :) – Justin