No cargar imágenes hasta que no se estén viendo

margancia · #1 (**permalink**) 20/09/2010, 11:13

Hola a todos, cómo están?

Estaba armando un sitio (por las dudas cuento que entre otras cosas usa librería jquery) que si o si (a pedido del cliente) tiene que tener toda la información en una sola página (y a darle al scroll

!).

El tema es que al tener tanta información y sobre todo tantas fotos hace que ande todo muy despacio y por ahí (si no se llega hasta abajo) consume más ancho de banda que el necesario.

Por eso pensé que tal vez la solución podría ser utilizar algún script que cargue las imágenes cuando se está en ese secor del html. He visto esto en varios sitios (lamentablemente ahora no me acuerdo de ninguno) que usan esta técnica y funciona muy bien.

Alguien sabe de lo que hablo? Por que lo releí y parece chino básico :P Cualquier ayuda será bienvenida! Gracias!

Dany_s · #2 (**permalink**) 20/09/2010, 13:17

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<?php
sleep(4);
echo "contenido div 3";
?>

y cuatro.php

Código PHP:

Ver original<?php
sleep(4);
echo "contenido div 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<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    $( function (){
        //Evento scroll para hacer unos calculos cada vez que muevan el scroll
        $(window).scroll(function(){
            /*
             * Resto la posicion del div menos la posicion del scroll
             * 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
             * 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)
             * 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
             * Cuando entra en el condicional borro la clase '.cargando' asi ya no vuelve a entrar en el condicional
             */
            if( ( $('#tres').position().top - $(window).scrollTop() ) < $(window).height() && !$('#tres.cargado').length ){
                $('#tres').text('Cargando...').addClass('cargado').load("tres.php");
            }
            //Y lo mismo para este
            if( ( $('#cuatro').position().top - $(window).scrollTop() ) < $(window).height() && !$('#cuatro.cargado').length ){
                $('#cuatro').text('Cargando...').addClass('cargado').load("cuatro.php");
            }
        });
    });
    </script>
    <style>
        div{height:500px; width:50px; background:green; margin-bottom:10px}
        #precarga{position:fixed; background-color:yellow; left:50%; width:100px; height:100px; display:none}
    </style>
  </head>
<body>
    <div id="precarga">Cargando...</div>
    <div id="uno">Primer div</div>
    <div id="dos">Segundo div</div>
    <div id="tres">Tercer div</div>
    <div id="cuatro">Cuarto div</div>
</body>
</html>

margancia · #3 (**permalink**) 22/09/2010, 11:34

gracias por la ayuda Dany!! voy a probarlo

alexk · #4 (**permalink**) 22/09/2010, 16:06

puedes probar con este plugin de jquery tambien a ver que tal... yo lo uso y va bien
http://www.appelsiini.net/projects/lazyload