Retrasar carga de imagenes a cuando su opacidad sea 1

[Clunhair]

Hola muy buenas a todo!

Llevo muchos años leyendo este foro, me ha ayudado muchisimo y he aprendido de todo. Curiosamente siempre he encontrado lo que estaba buscando. Sin embargo ahora estoy bastante bloqueado y no se como seguir :S

Estoy haciendo una galería de imagenes por pestañas, y lo que estoy intentando es retrasar la carga de fragmentos de código, o de imagenes en su defecto. Todas las imagenes están en el mismo sitio y lo que voy haciendo es cambiando su opacidad para que se muestren unas u otras. El problema viene de que son unas 570 imagenes con casi 93Mb de peso :S

No puedo dejarlo tal cual, sería inviable, y poner otro sistema sería una putada porque tendría que cambiar totalmente la web :S

Así que estoy intentando que al cambiar la opacidad de una capa de 0 a 1, se cargue un fragmento de codigo desde un archivo externo. O que se cargue el contenido de esa capa o sus imagenes.

Espero podais echarme una mano u orientarme un poco :S

Desde ya, muchas gracias!!!

[NueveReinas]

Quizá no solucione [totalmente] tu problema, pero te recomiendo estos dos métodos para agilizar la carga de tu página:

El primero es obtener las imágenes desde PageSpeed Insights (Chrome), y después reemplazarlas por las que tenemos actualmente.



Y el otro, desde el .htaccess de Apache habilitar el caché de las imágenes (y otros recursos). Para esto tienes que tener activado el mod_rewrite.

Código Apache:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 600 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 172800 seconds"
ExpiresByType application/xhtml+xml "access plus 172800 seconds"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
 

Saludos.

[Clunhair]

Muchas gracias por tu respuesta NueveReinas,

He intentado lo de PageSpeed Insights, pero comprime muy poco más las fotos :/ Ahora mismo estoy en 165 Kb de media por foto.

Por otro lado poner más tiempo de cache para las imagenes está genial. Pero los usuarios siguen teniendo que descargar casi 100 Mb de web y es una locura :S

Alguien tiene más ideas?

[lauser]

Puedes usar LazySize(responsive) o lazyLoad, lo que conseguirás es que no se cargara la imagen hasta que vaya a aparecer en pantalla. Para que me entiendas.... una pagina tiene 50 img, pero visualmente solo se ven 10..... solo cargara esas 10 y a medida que el usuario vaya visualizando las restantes se irán cargando. Es muy fácil de implantar.

Y el otro, desde el .htaccess de Apache habilitar el caché de las imágenes (y otros recursos). Para esto tienes que tener activado el mod_rewrite.

Ese htaccess... me suena...
Tienes que activar el mod_expires, no el rewrite.

[NueveReinas]

Iniciado por lauser

Ese htaccess... me suena...
Tienes que activar el mod_expires, no el rewrite.

¡Tuyo es! Y muchas gracias nuevamente