php - 加载大图像页面加载时间

Question

我尝试了几种方法来做到这一点，并发现两者都有问题。

1. 从 ajax 帖子加载图像，并将 img id 源更新到它。
2. PHP 函数加载“li”列表中的所有图像，其中类设置为 display:none 并使用 jquery 隐藏/显示图像。

我的问题是这些图像最小为 1440 像素 x 960 像素。因此，如果我使用 ajax post 加载，则需要一段时间才能显示完整图像，如果我使用 php 循环加载，则页面加载需要很长时间。

这是我的 php 循环函数的示例：

public function LoadStreamImages()
{
    $imgs = '<li id="0"><img src="img/OM.jpg" class="bgimg" /></li>';
    if($db->num_rows($consulta)>0)
    {
        while($row = $db->fetch_array($consulta)) { 
            $imgs .= '<li id="' . $row['id'] . '" class="hidden"><img src="img/' . $row['imagefile'] . '" class="bgimg" /></li>';
        }
    }   

    echo $imgs;
}

我能做些什么来加快这个速度？

Answer 1

我猜你最好的解决方案是在方法之间。通过 php 发送图像信息，但在页面加载后使用 javascript 加载 em....

<?php
public function LoadStreamImages(){

    if($db->num_rows($consulta)>0)
    {
        $i =0;
        $imgs = array();    
        while($row = $db->fetch_array($consulta)) { 
            $imgs[$i]['id'] = $row['id'];
            $imgs[$i]['imagefile'] = $row['imagefile'];
            $i++;
        }
    }   

echo "<script>myImages = ".json_encode($imgs).";</script>";
}
?>

并在 myImages 上的页面加载后使用 javascript 运行 foreach，只需插入 <li>s 和 <img>s 标签。

Answer 2

您可以加载缩略图并将其拉伸到大图像的大小，它将用作模糊占位符，直到完整大小的图像可用。淡出低分辨率图像以显示下面的完整图像。这是假设有一种简单的方法可以判断图像何时加载。