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

我有这样的代码，它需要从数据库中获取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>

非常感谢！

来源

2016-01-17 nmn

你应该使用jQuery的懒加载。检查https://plugins.jquery.com/lazyload/ –

可以使用延迟加载的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();延迟加载页面中类“懒”的所有图像。

如果你不想加载图像显示出来，只需创建一个1x1的空白图像，那应该可以做到。

参考：Source on GitHub

附：图像检索的顺序取决于它如何存储在数据库中。

希望这会有所帮助。 :)

来源

2016-01-17 13:11:34

我会试试看！ 10x – nmn

@nmn当然... :) –

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

回答

相关问题