Question

这就是我想出来的

    <?php
<<<EOF
  <!DOCTYPE html>
  <html>
    <body>
EOF;
        $images = glob('pfp/*.{jpg,jpeg,gif,png}', GLOB_BRACE);

        foreach($images as $resource) {
          echo "<img src=\"" . $resource . "\">";
        }
<<<EOF
    </body>
  </html>
EOF;
?>

会有比这更好的方法吗？理想情况下，我希望它看起来像this，但我会满足于居中和一个接一个的清洁外观。感谢您的时间。

此致 NoobPHP

Answer 1

从下面的代码开始，当从glob函数填充img路径时，请不要将其放在src标记中，而是将其放在其他属性data-src中。然后，在页面加载完成后，使用jquery代码逐个将data-src的值交换为src标记。

这是我这样做的方法，还有很多其他方法可以做到这一点。

代码：

<!DOCTYPE html>
  <html>
    <body>
<?php
        $images = glob('pfp/*.{jpg,jpeg,gif,png}', GLOB_BRACE);
        $i = 1;
        foreach($images as $resource) {
          echo "<img style="display:none;" id='imgLoader_".$i."' data-src=\"" . $resource . "\">";
         $i++;
        }
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><script>
<script type="text/javascript">
$(document).ready(function(){
 $("[id^='imgLoader_']").each(function(){
  $(this).delay(500).attr('src',$(this).attr('data-src')).delay(500).show();
 });
});
</script>
    </body>
  </html>

使用PHP显示目录中的图像。我想逐个显示它，因为它有不同的大小。

1 个答案: