Tema: No cargar imágenes hasta que no se estén viendo
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/09/2010, 13:17
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: No cargar imágenes hasta que no se estén viendo
como la búsqueda de imágenes de google http://www.google.com.ar/images?hl=e...w=1920&bih=886

o los comentarios en la doc de jquery http://api.jquery.com/scroll/



es bastante sencillo

Alto de página = 1000
Posición top del div = 1500
Si moves el scroll y obtenes la posición, lo restas con la posición del div y sabes si se encuentra en pantalla :)

hace 2 archivos php
tres.php
Código PHP: 
Ver original
  1. <?php
  2. sleep(4);
  3. echo "contenido div 3";
  4. ?>

y cuatro.php
Código PHP: 
Ver original
  1. <?php
  2. sleep(4);
  3. echo "contenido div 4";
  4. ?>


y este el html y jquery, suponé que querés cargar contenido sólo cuando se vean el div #tres y #cuatro

Código HTML: 
Ver original
  1. <html>
  2.   <head>
  3.     <title></title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  6.     <script>
  7.     $( function (){
  8.         //Evento scroll para hacer unos calculos cada vez que muevan el scroll
  9.         $(window).scroll(function(){
  10.             /*
  11.              * Resto la posicion del div menos la posicion del scroll
  12.              * Si la pantalla es de 1000px entonces, sabiendo que la posicion del div es 1500 y el scroll de 100 sé que no se está viendo el div
  13.              * cuando la posicion top del scroll sea de 500 ahi recien está por entrar en pantalla, 1000 - 500 = 1000 (que es el tamaño de pantalla)
  14.              * si es menor o igual al tamaño de la pantalla muestro el contenido, tambien compruebo que el div no tenga clase 'cargando' asi no hace petición cada vez que se mueva el scroll
  15.              * Cuando entra en el condicional borro la clase '.cargando' asi ya no vuelve a entrar en el condicional
  16.              */
  17.             if( ( $('#tres').position().top - $(window).scrollTop() ) < $(window).height() && !$('#tres.cargado').length ){
  18.                 $('#tres').text('Cargando...').addClass('cargado').load("tres.php");
  19.             }
  20.             //Y lo mismo para este
  21.             if( ( $('#cuatro').position().top - $(window).scrollTop() ) < $(window).height() && !$('#cuatro.cargado').length ){
  22.                 $('#cuatro').text('Cargando...').addClass('cargado').load("cuatro.php");
  23.             }
  24.         });
  25.     });
  26.     </script>
  27.     <style>
  28.         div{height:500px; width:50px; background:green; margin-bottom:10px}
  29.         #precarga{position:fixed; background-color:yellow; left:50%; width:100px; height:100px; display:none}
  30.     </style>
  31.   </head>
  32. <body>
  33.     <div id="precarga">Cargando...</div>
  34.     <div id="uno">Primer div</div>
  35.     <div id="dos">Segundo div</div>
  36.     <div id="tres">Tercer div</div>
  37.     <div id="cuatro">Cuarto div</div>
  38. </body>
  39. </html>