Slow Load Images in PHP, Javascript ( and jQuery?) -
i have php code loads data database. due large quantity of images, page lags when it's being loaded. need code load page , load images come across them when scrolling. images don't have loaded while page loaded. (in order provide better performance)
if isn't possible, can provide me code show loading icon while page loading , hide lagging images/page. until page loads (images , all)
here's php code
<?php $servername = "localhost"; $username = "xxxxx"; $password = "xxxxx"; $dbname = "xxxxxx"; // create connection $conn = new mysqli($servername, $username, $password, $dbname); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } $sql = "select * posts bp ='2' order id desc limit 2"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<div class='entire'><br><div style='display:inline-block;vertical-align:top;padding-left:25px;'> <img src='" . $row["pro_pic"]. "' alt='img' class='circular'/> </div> <div style='display:inline-block;font-size:48px;'> <div><font face='helveticaneue-thin'>" . $row["username"]. "</div></font> </div><a href='http://twitter.com/intent/tweet?hashtags=bithumor&text=" . $row['post_title']. " http://bithumor.co/bits/" . $row['id']. "' target='_blank'><img src='http://s17.postimg.org/3q2ic0n7f/socialmedia_icons_twitter_07_128.png' class='share' width='55' height='55'></a><br><br><center><a href='http://app.bithumor.co/posts?id=" . $row["id"]. "' style:'text-decoration:none;' target='_self'><img src='" . $row["content_url"]. "' width='100%' class='upload' style='border-top-width:1px;border-top-color:#a4a4a4;border-bottom-width: 1px;border-bottom-color:#a4a4a4;'></center></a><br><b><span style='padding-left:20px;'><font face='helveticaneue-thin' size='5'>" . $row["post_title"]. "</span></font></b><br><center><embed src='http://app.bithumor.co/bpsection/like?id=" . $row["id"]. "' width='22%'><iframe src='http://app.bithumor.co/community/comment.php?id=" . $row["id"]. "' width='22%'></iframe><iframe src='http://app.bithumor.co/community/report.php?id=" . $row["id"]."' width='22%'></iframe></center></div></div></center><br>"; } } else { echo "<br><center><font face='helveticaneue-light' color='black' font size='6'>come @ 7am est<br> see <b>first</b> bitpick!</font></center>"; } $conn->close(); ?>
you use lazyload, images inside viewport being loaded. rest of images loaded "on demand".
Comments
Post a Comment