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

Question

我创建了一个水平 div，其中包含大量图像但具有固定宽度，因此您必须滚动才能查看所有图像。我正在尝试实现延迟加载以加快加载时间，但我可以让它在前几张图像上工作，但其他图像不会保持灰色。

当我删除 white-space:nowrap; 时，我可以让延迟加载正常工作，但我丢失了我的单行 div。

让水平滚动 div 与延迟加载一起工作的好方法是什么？

<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>

这是我的 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

首先是一些小的变化:

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

应该是

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

此外，我从未在 html 中包含我的 php 脚本，但也许 lazylload 函数触发得太早了。 查看浏览器加载的代码，如果函数正确触发，元素应如下所示:

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

最后但并非最不重要的一点是，lazyload 可能与您围绕图像的链接有问题，您应该使用原始图像对其进行测试。