Question

我有这个代码，它从DB中获取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>

提前多多感谢!!

Answer 1

您可以使用 Lazy-Load 插件进行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空白图像，这应该可以解决问题。

参考：Source on GitHub

P.S。检索图像的顺序取决于它在数据库中的存储方式。

希望这会有所帮助。：）

有没有一个很好的方法来逐个加载图像？

1 个答案: