Question

我尝试了几种方法来解决这两个问题。

从ajax帖子加载图片，并将img id source更新为该文件。
PHP函数，它将所有图像加载到“li”列表中，并将类设置为display：none，并使用jquery hide / show the image。

我的问题是这些图像最小为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，只需插入＆lt; li＆gt; s和＆lt; img＆gt;标记。

Answer 2

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

加载大图像页面加载时间

2 个答案: