Hola America|UNK,
La verdad es que no me habia fijado, jeje. Es interesante. Bueno, eso lo hacen usando el evento del scroll, y cuando se activa simplemente cambian el fondo del div por el de la imagen, jeje.
Aqui te muestro un ejemplo con un codigo super tonto y sencillo y super corto que se ha convertido en un macro documento pues no me expliques no he parado de escribir hasta estar aburrido, jeje.
Aqui esta el codigo(para que funcione tienes que guardar el codigo en un documento llamado 'salbatore_mola_mazo.html'):
Código:
<!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=ISO-8859-1" />
<title>Cargar imagenes al mover el scroll</title>
</head>
<script>
function cargar_imagenes_videos(modo_de_cargar)
{
//ahora comprobamos el modo que has decidido cargar las imagenes, lo mejor la sencilla, :P
if(modo_de_cargar=='forma_sencilla')
{
//esta forma solo cambia la ruta de la imagen de fondo de los miniaturas.
//alert('Cambio de fondo!... ya las veo!... magia!');
//si usamos colores.
document.getElementById('video_sin_cargar').style.background= "green";
//si usamos imagen (borrar "//" de la siguiente linea)
//document.getElementById('video_sin_cargar').style.background= "url('asd.png')";
}
if(modo_de_cargar=='forma_compleja')
{
//tienes dos formas de hacerlo, una con ajax, recibiendo las imagenes.
alert('Ahora con un sencillo ajax recibes la informacion de cada video.');
}
if(modo_de_cargar==null)
{
alert('Especifica el modo de cargar las imagenes en onscroll=cargar_imagenes_videos("xxxxxx")');
}
}
</script>
<body onscroll="cargar_imagenes_videos('forma_sencilla')" style="margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif">
<div id="div_alto_para_obligar_a_crear_scroll" style="height:1500px;padding:20px; background:#009933">
<fieldset style="background:#00CCCC; ">
<legend style="background:#00CCCC">CONSEJOS Y EXPLICACION</legend>
Ahora si mueves el scroll se activara la funcion 'cargar_imagenes_videos', donde haras que cargue las imagenes de los videos.
Te pongo dos ejemplos de videos. En caso de que quieras hacerlo correctamente, deberas acceder a los elementos por medio de su clase, para no crear javascript obstructivo.
Pasarias un bucle por todos los elementos que tienen la clase "miniatura_oculta" y les cambiarias el fondo!... chupado!... ademas de divertido!. :D.
<hr />
Otra cosa, para saber cuantos videos no debes cargar, es decir, para saber los videos que debes cargar tienes dos metodos:
<br/>
<ul>
<li>Calcular el tamaño de lo que ve el usuario, es decir, de la ventana de su navegador (con innerHeight ) o mejor calcular el tamaño del div que se visualizan los videos hasta cortar con lo invisible de la ventana(con offsetHeight)</li>
<li>Simplemente cargar los primeros y dejar los ultimos sin cargar, tal cual.</li>
</ul>
<div style="width:12px; height:12px; background:green; overflow:auto; float:left"></div>
<div style=" overflow:auto; float:left"> En verde imagen cargada.</div>
<br/>
<div style="width:12px; height:12px; background:red; overflow:auto; float:left"></div>
<div style=" overflow:auto; float:left"></div> En rojo imagen sin cargar.
</fieldset>
<fieldset style="background:#00CCCC; margin-top:20px ">
<legend style="background:#00CCCC">VIDEOS DE DEMOSTRACION</legend>
<div style=" background:#00CC99; padding:20px; overflow:auto">
<div style="float:left; width:100px; height:100px; background:green; margin-right:20px;"></div>
<div style="float:left; width:300px;">
<span style="color:#990000">Video:</span> La rana gustavo se comio un cucurucho de nata y chocolate.
<br />
<span style="color:#990000">Autor:</span> Michael Jackson.
</div>
</div>
<hr />
<div style=" background:#00CC99; padding:20px; overflow:auto">
<div id="video_sin_cargar" style="float:left; width:100px; height:100px; background:red; margin-right:20px;"></div>
<div style="float:left; width:300px;">
<span style="color:#990000">Video:</span> Espinete se cae de su triciclo galactico.
<br />
<span style="color:#990000">Autor:</span> Darth Vader.
</div>
</div>
</fieldset>
<fieldset style="background:#00CCCC; margin-top:20px ">
<legend style="background:#00CCCC">¿LE PONEMOS MAS COSAS?</legend>
<ul>
<li>Que al pasar el cursor por encima del video cambie la imagen del fotograma visualizado. Lo podrias hacer facilmente con el evento mouseover</li>
<li>Si lo vas a hacer con videos de youtube, pues supongo que no tienes un super servidor y ganas de alojar videos, debes saber que las miniaturas se guardan de este modo (lo digo para hacer una previsualizacion):</li>
<ul>
<li>http://img.youtube.com/vi/3vP7hnoy9Tw/1.jpg</li>
<li>http://img.youtube.com/vi/3vP7hnoy9Tw/2.jpg</li>
<li>http://img.youtube.com/vi/3vP7hnoy9Tw/3.jpg</li>
</ul>
<li>Ya puestos hasta podias hacer una previsualizacion del video en miniatura con un ajax en el que se viese el video en 50x50 sin volumen.</li>
<li>Debes mirar en google los trucos para incustrar videos de algunos blog, existen cosas graciosas, sobre el comportamiento del script de youtube. Y termino! :p</li>
</ul>
</fieldset>
Espero que te sirva!.
</div>
</body>
</html>
Espero que te sirva!... un saludo!
