有没有一种好方法可以一一加载图像 - Is there a good way to load images one by one?

Is there a good way to load images one by one?

我有这段代码，它从数据库中获取imgs文件名，并简单地将它们显示在网格中。麻烦的是，客户添加了宽大的图片，有一些加载时间。出于某种原因，浏览器以随机顺序加载图像，或者可能首先加载较小的图像。

我希望浏览器按照它们在代码中出现的顺序逐个加载图像，顶部图像，然后是波纹管等。

一个评论 - 该页面还有其他一些图像，它不是唯一的网格。另一个评论 - 我应该考虑组合加载 GIF 吗？

<?php
$result = mFiles($id);                  
if ($result) {
  while ($row = $result->fetch()) {
    $theFile=$row['img2'];
  }
?>
<div style="float:left;width:100%;">
  <img src="images/upload/files/<?php echo($theFile); ?>" />
</div>

提前非常感谢！！

您可以使用 JQuery 的延迟加载插件

添加引用：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

修改你的代码，比如，

<div style="float:left;width:100%;">
    <img class="lazy" src="img/loading.gif" data-original="images/upload/files/<?php echo($theFile); ?>" />
</div>

然后使用 $("img.lazy").lazyload(); 延迟加载页面中具有类"lazy"的所有图像。

如果您不希望显示加载图像，只需创建一个 1x1 空白图像，这应该可以解决问题。

参考：GitHub 上的来源

附言检索图像的顺序取决于其在数据库中的存储方式。

希望这有帮助。 :)