加载大图像页面加载时间

Question

我已经尝试了几种方法来做到这一点，但都发现了问题。

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

我的问题是这些图像的最小值是1440px x 960px。因此，如果我用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的标签。

Answer 2

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