滚动时容器中的水平延迟加载不显示图像

Question

I have created a horizontal div that hold a large number of images but has a set width so you have to scroll to see all of the images. I am trying to implement lazy load to speed up load time, but I can get it to work on the first few images, but not the other images just stay gray.

When I remove white-space:nowrap; I can get the lazy load the work correctly, but I lose my single row div.

What would be a good way to have the horizontal scrolling div work with lazy load?

<div class="galleryContainer container-fluid list-inline">
  <div class="row ">


<?php     

        $files = glob("public/img/thumbnail/*.*");
        $lFiles = glob("public/img/*.*"); 

        for ($i=0; $i<count($files); $i++)
          // ($i=0; $i<count($lFiles); $i++)  
        {
        $image = $files[$i];
        $Limage = $lFiles[$i]; 
        // print $image ."<br />";
  echo "<div class='img-responsive col-md-3'>";
    echo '<div class="container" width: 90%">';
      echo '<a href="../'.$Limage .'"> 
            <img width:"300px" height="400px" height="class="lazy" data-original="../'.$image .'" alt="Mural Image"/></a>';
        echo '</div>';
      echo '</div>';
}
?>

  </div>
</div>

<script>
jQuery(document).ready(function ($) {
  $(function() {
      $("img.lazy").lazyload();
        container: $(".galleryContainer")
        threshold : 200
        effect : "fadeIn"
    });
});
</script>

    <script src="../public/scripts/jquery.lazyload.js"></script>
    <script src="../public/scripts/jquery.scrollstop.js"></script>

Here is my CSS:

.galleryContainer {
    margin-top: 2%;
    width: 90%;
    overflow-x:scroll;
    overflow-y:hidden;

}

.profile {
    margin-top: 5%;
}
}

.galleryContainer img {
    height: 300px;
    width: 400px;
}


.fullDrawing img{
    height: 217.273px;
    width:1440px;
}


.list-inline {
    white-space:nowrap;
}


.galleryContainer > .row [class*="col-lg"], .galleryContainer > .row [class*="col-md"], .galleryContainer > .row [class*="col-md"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
  }
  #main-content > .row {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
  }

Answer 1

First some small changes:

<img width:"300px" height="400px" height="class="lazy" data-original="../'.$image .'" alt="Mural Image"/>';

should be

<img class="lazy" data-original="../'.$image .'" width:"300" height="400" alt="Mural Image">';

Also i never included my php scripts in html, but maybe the lazylload function triggers too early. Look at the code loaded by your browser, if the functon triggered correctly the element should look like this:

<img class="lazy" data-original="PATH" width="300" height="400" alt="Mural Image" src="PATH" style="display: inline;">

Last but not least lazyload may have problems with your link around the image, you should test it with a raw image.