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