Foros del Web » Programando para Internet » Javascript »

Precarga de imágenes

Estas en el tema de Precarga de imágenes en el foro de Javascript en Foros del Web. Hola: estoy armando un portafolio de trabajos, esto es lo que tengo hecho hasta ahora http://www.bairesagency.com/bairesnew/port_web_01.php?id=1 El problema al que apunto resolver en este momento ...
  #1 (permalink)  
Antiguo 17/04/2013, 11:13
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 2 meses
Puntos: 2
Precarga de imágenes

Hola: estoy armando un portafolio de trabajos, esto es lo que tengo hecho hasta ahora
http://www.bairesagency.com/bairesnew/port_web_01.php?id=1

El problema al que apunto resolver en este momento es la velocidad de la carga de las imágenes que están a la derecha de cada monitor, las cuales se tardan un poquito en aparecer la primera vez hasta que las guarda en cache.

Quisiera saber si hay algún script de precarga al que se le pueda ordenar puntualmente lo que tiene que descargar, en que orden y que lo haga después de que se hayan cargado las imágenes propias de la página.

Inversigué y revisé varios tutoriales de pre-cargas con js y con estilos pero en ninguno vi que se pudiera indicar que lo hiciese luego de cargar la información de la página que se está viendo ni tampoco que se le pudiera asignar un orden de carga, es decir: cargar imagen 1, al terminar cargar la 2, al terminar cargar la 3, etc.

Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 18/04/2013, 07:31
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Precarga de imágenes

Se puede hacer con javascript puro, pero en tu caso, que ya estás usando jquery, te doy una solución más práctica,
mirá este ejemplo
http://emprear.com.ar/competencia2011/

en el head te vas a encontrar con esto
Código:
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>
Y antes del cierre del body, un div que en el css está con display:none; !!
Código:
<div id="precarga"><!-- precarga --></div>
y finalmente, la lista de archivos que deseamos precargar (pueden ser imágenes, fuentes, flash, texto, etc, no hay limitación)

Código:
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'/competencia2011/css/josefin/JosefinSlab-SemiBold-webfont.ttf',
'/competencia2011/css/josefin/JosefinSlab-Bold-webfont.ttf',
'/competencia2011/img/santa.png',
'/competencia2011/img/sexy.png',
'/competencia2011/img/amianto.png',
'/competencia2011/img/cand.cur',
'/competencia2011/img/carro.png',
'/competencia2011/img/contorno-tierrafire.png',
'/competencia2011/img/est-h.png',
'/competencia2011/img/estrellas.png',
'/competencia2011/img/luna.png',
'/competencia2011/img/regalo.png',
'/competencia2011/img/renos.png',
'/competencia2011/img/smart.png',
'/competencia2011/precarga.txt'
);
//]]>
</script>
En mi ejemplo, es una página introductoria y lo que precargo son los elementos que van a utilizarse en la animación posterior.

En el tuyo deberías determinar "inteligentemente" que vale la pena precargar y que no.
Te comento otro detalle, mirá
https://googledrive.com/host/0B5cDQ-...DQ/img/opt.jpg
pesa 74kb contra los 128kb de la tuya, y visualmente casi no hay pérdida de calidad. Sería importante que trabajes obre eso

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 18/04/2013 a las 07:37
  #3 (permalink)  
Antiguo 26/04/2013, 09:39
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 2 meses
Puntos: 2
Respuesta: Precarga de imágenes

Emprear: antes que nada, un millón de gracias por contestar y disculpa la demora, no es desinterés, sólo se me presentaron algunos percances.

Lo armé como me comentaste pero algo estoy haciendo mal porque no noto diferencia en la precarga, hasta le dejo unos 10 o 15 seg para que precargue antes de presionar algún botón pero no noto la diferencia con o sin el código.
Revisé las rutas varias veces pero están bien. Se me está escapando algo en mi inexperiencia, espero que puedas ayudarme, te pego el código.

Una duda, en este sistema de precarga, pone en cache la primera imagen de la lista y al terminar pasa a la segunda o como funciona?



CÓDIGO "portafolio_web.php"______________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bairesAGENCY</title>

<link href="css/template.css" rel="stylesheet" type="text/css" />

<?php
if(isset($_GET['id']))
{
if($_GET['id']==2){
$lang="menu_eng.php";
}
else{
$lang="menu_esp.php";
}
}
?>

<!--Script precarga-->
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>


</head>

<?php include_once($lang); ?>
<?php include_once('footer.html'); ?>

<body>

<div id="contenedor">
<div id="contenedor_web">
<div id="fridays_2"><?php include_once('portafolio/web/fridays_2.php'); ?></div> <!--1-->
<div id="sm"><?php include_once('portafolio/web/sm.php'); ?></div> <!--2-->
<div id="pepsi_login"><?php include_once('portafolio/web/pepsi_login.php'); ?></div> <!--3-->
<div id="pepsi_vegas"><?php include_once('portafolio/web/pepsi_vegas.php'); ?></div> <!--4-->
<div id="pepsi_blue"><?php include_once('portafolio/web/pepsi_blue.php'); ?></div> <!--5-->
<div id="maraluna"><?php include_once('portafolio/web/maraluna.php'); ?></div> <!--6-->
<div id="maraluna_ipad"><?php include_once('portafolio/web/maraluna_ipad.php'); ?></div> <!--7-->
<div id="maraluna_iphone4"><?php include_once('portafolio/web/maraluna_iphone4.php'); ?></div> <!--8-->
</div>
</div>

<!-- precarga -->
<div id="precarga"></div>


<!--Script precarga LISTA-->
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'img/port/web/fridays_2/galeria/fridays_2_02_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_03_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_05_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_08_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_09_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_10_large.jpg',
'img/port/web/fridays_2/galeria/fridays_2_12_large.jpg',

'img/port/web/sm/galeria/sm_02_large.jpg',
'img/port/web/sm/galeria/sm_03_large.jpg',
'img/port/web/sm/galeria/sm_04_large.jpg',
'img/port/web/sm/galeria/sm_05_large.jpg',
'img/port/web/sm/galeria/sm_06_large.jpg',
'img/port/web/sm/galeria/sm_07_large.jpg',
'img/port/web/sm/galeria/sm_08_large.jpg',
);
//]]>
</script>
<!-- /precarga -->


</body>
</html>




template.css__________________________
@charset "UTF-8";
/* CSS Document */

#precarga{
display:none;
}
  #4 (permalink)  
Antiguo 26/04/2013, 10:07
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 2 meses
Puntos: 2
Respuesta: Precarga de imágenes

Gracias por el tip de las imágenes pero no me aprobaron la diferencia de calidades, en algunos monitores no se nota mucho pero si lo ves en led y puntualmente en mac la diferencia es enorme.
Pero gracias igual por la sugerencia.
  #5 (permalink)  
Antiguo 26/04/2013, 13:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Precarga de imágenes

Bueno, antes del tema de la precarga, fijate por que tu html tiene errores muy graves.
Tenés nada más ni nada menos que 10 DOCTYPES declarados, y 10 <heads> y 10 <body>
Casi 200 errores de html, no me extraña que no la visualices del todo bien.
Supongo que todo viene de que estás utilizando includes de php y en todo el contenido externo ponés un html completo

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 26/04/2013, 14:53
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 2 meses
Puntos: 2
Respuesta: Precarga de imágenes

mmmmmmm
imagino que deben ser los includes, voy a probar borrarlos a ver si funciona bien.
Sorry, no hace mucho que arranqué con php y ahora que lo dices tiene lógica, debería borrar todo eso de los archivos que voy a incluir.
Me fijo y te cuento

Gracias

Etiquetas: js, php, precarga
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:41.