Lazy Loading with a responsive script

[feehoy]

I have a script that calls image files through a database. It all works well but the image list is too long and loading is slow.I need to implement lazy loading after the third image. How do I implement this?

 <?php
         $query = mysqli_query($con, "SELECT * FROM image_uploads WHERE filename <> 'no-image.jpg' AND location = 'Masks of Venice' ORDER BY title ASC");
         ?>
      <ul>
      <li>
      <?php
         while ($row = mysqli_fetch_array($query)) {
                                $id                     = $row["id"];
                                $_SESSION['id']         = $id;
                                $file_source            = $row["file_source"];
                                $_SESSION['file_source']= $file_source;
                                $title                  = $row["title"];
                                $_SESSION['title']      = $title;
                                $location               = $row["location"];
                                $_SESSION['location']   = $location;
                                $author              = $row["author"];
                                $_SESSION['author']     = $author;


            echo "<img loading='lazy' src='{$row['file_source']}' alt'...' width='100%' />\n";?></a>

[rproffitt]

I see line 28 calls out lazy so are you reporting it doesn't work? I won't breach into a discussion about what is lazy loading here but maybe you forget to tell the browser when to load the image. If so, read https://css-tricks.com/the-complete-guide-to-lazy-loading-images/