Infinite scroll en moviles

altex · #1 (**permalink**) 10/09/2012, 09:03

Buenas a todos,

he realizado un infinite scroll en PHP, MySQL y JQuery, y resulta que funciona perfectamente en el PC, pero desde el móvil sale la barra de cargando pero nunca llega a cargar.

Es decir, el movil detecta que ha llegado al final de la página (porqué sale el gif de cargando) pero no llega nunca a cargar.

Tengo otro plugin jquery y me funciona correctamente en el movil, ¿hay algún problema en aplicar ajax en moviles?

Si necesitas el código lo puedo colgar.

Saludos

Dradi7 · #2 (**permalink**) 10/09/2012, 09:23

Seria bueno que mostraras el codigo

altex · #3 (**permalink**) 10/09/2012, 10:28

Os pongo el ejemplo que adapté a mi web:

index.php

Código PHP:

  <?php 
$con = mysql_connect("localhost", "username", "password"); 
mysql_select_db("database_name"); 
 
$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12"); 
 
$row_object = mysql_query("Select Found_Rows() as rowcount"); 
$row_object = mysql_fetch_object($row_object); 
$actual_row_count = $row_object->rowcount; 
?> 
 
<html lang='en'> 
    <head> 
        <title>Infinite Scroll</title> 
        <script src="jquery-1.7.2.js" type="text/javascript"></script> 
        <style> 
            #result div{ 
                border: 10px solid #EEEEEE; 
                float: left; 
                height: 300px; 
                margin: 20px; 
                outline: 1px solid #CFCFCF; 
                width: 300px; 
             
            } 
            #more{ 
                background: none repeat scroll 0 0 #EEEEEE; 
                border: 1px solid #CFCFCF; 
                color: #000000; 
                display: none; 
                font-weight: bold; 
                left: 1100px; 
                padding: 5px; 
                position: fixed; 
                top: 100px; 
            } 
            #no-more{ 
                background: none repeat scroll 0 0 #EEEEEE; 
                border: 1px solid #CFCFCF; 
                color: #000000; 
                display: none; 
                font-weight: bold; 
                left: 1100px; 
                padding: 5px; 
                position: fixed; 
                top: 100px; 
            } 
            #result{ 
             
            } 
        </style> 
        <script type="text/javascript"> 
            var page = 1; 
 
 
            $(window).scroll(function () { 
                $('#more').hide(); 
                $('#no-more').hide(); 
 
                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
                    $('#more').css("top","400"); 
                    $('#more').show(); 
                } 
                if($(window).scrollTop() + $(window).height() == $(document).height()) { 
 
                    $('#more').hide(); 
                    $('#no-more').hide(); 
 
                    page++; 
 
                    var data = { 
                        page_num: page 
                    }; 
 
                    var actual_count = "<?php echo $actual_row_count; ?>"; 
 
                    if((page-1)* 12 > actual_count){ 
                        $('#no-more').css("top","400"); 
                        $('#no-more').show(); 
                    }else{ 
                        $.ajax({ 
                            type: "POST", 
                            url: "data.php", 
                            data:data, 
                            success: function(res) { 
                                $("#result").append(res); 
                                console.log(res); 
                            } 
                        }); 
                    } 
 
                } 
 
 
            }); 
 
        </script> 
 
 
 
 
    </head> 
 
    <body> 
        <div id='more' >Loading More Content</div> 
        <div id='no-more' >No More Content</div> 
        <div id='result'> 
            <?php 
            while ($row = mysql_fetch_array($result)) { 
                echo "<div><img src='images/" . $row['name'] . ".jpg' /></div>"; 
            } 
            ?> 
        </div> 
 
 
    </body> 
</html>

data.php

Código PHP:

  <?php 
 
$requested_page = $_POST['page_num']; 
$set_limit = (($requested_page - 1) * 12) . ",12"; 
 
$con = mysql_connect("localhost", "username", "password"); 
mysql_select_db("database_name"); 
 
 
$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit"); 
 
 
 
$html = ''; 
 
while ($row = mysql_fetch_array($result)) { 
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>"; 
} 
 
 
echo $html; 
exit; 
?>

Dradi7 · #4 (**permalink**) 10/09/2012, 10:38

Mas bien porque no tratas de usar el jQuery para mobile porque según no me equivoco el jQuery es un poco pesado para un navegador móvil y ademas algunas funciones no son soportadas.

Saludos