i have page loads slow , make user experience more enjoyable. load each div when div read() fade in using jquery. code works loads @ same time , fades in. load in order of div placement. below example code of loading 2 divs large tables in them. each table show it's ready. first 1 should ready before second 1 , should render first. have tried separate js each has own ready() didn't work.
also: more looking consent on how rather specific code. if have lot of divs lot of different tables. not every div have table in it. might have pictures or text. there should way load each div whenever it's ready displayed.
<!doctype html> <html lang="en"> <head> <link href="style/jquery-ui.css" rel="stylesheet" type="text/css"/> <link href="style/main.css" rel="stylesheet" type="text/css" /> <link href="//cdn.datatables.net/1.10.7/css/jquery.datatables.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.datatables.min.js"></script> <title>animated jquery fade | script tutorial</title> </head> <script> $(document).ready(function(){ $('.mytable').datatable(); }); $(document).ready(function(){$(".content").hide().fadein(1000);}); </script> <body> <div id="header"> <h1>welcome test page</h1> </div> <div class="content" style="display: none;"> <table class="mytable"> <thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </thead> <tbody> <?php for($i =0; $i <10000; $i++){ ?> <tr> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> </tr> <?php } ?> </tbody> </table> </div> <div class="content" style="display: none;"> <table class="mytable"> <thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> </thead> <tbody> <?php for($i =0; $i <20000; $i++){ ?> <tr> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> <td><?php echo $i; ?></td> </tr> <?php } ?> </tbody> </table> </div> </body> </html>
i think need here provide datatables ajax source, retrieve data. set callback fire when data has been loaded fadein tables.
it might this:
$(document).ready(function() { $('#mytable1').datatable( { "ajax"{ "url": 'path/to/datasource.php', "success" : function(){ $('#mytable1').parent().fadein(1000); } } } ); } ); this untested code , syntax may wrong, should give idea of how done. also, returned data php datasource must return json in correct format datatables expecting (this important, , people make mistakes).
please see datatables ajax docs here.
Comments
Post a Comment