2013-02-09 187 views
0

我已经尝试了几种方法来做到这一点,并找到了两个问题。加载大图像页面加载时间

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

我的问题是这些图像的最小值为1440px x 960px。因此,如果我加载了ajax文章,它需要一段时间才能显示完整图像,如果使用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; 
} 

我能做些什么来spead这个吗?

+0

在这里完全讨论http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image – 2013-02-09 01:25:51

+0

不太确定如何适用于一次加载多个(600)大图像,如果你能告诉我一个例子或告诉我哪个是最好的方式去它将是有益的..不寻找答案只是很好的建议:) – Andres 2013-02-09 01:28:38

回答

0

我猜你最好的解决方案之间的方法。发送图像信息直通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刚插入<李>和< IMG> S上的页面加载后运行JavaScript的一个foreach标签。

+0

这工作,但我不得不一次加载一个图像在一次,因为他们太大并加载页面从加载:(但谢谢反正 – Andres 2013-02-12 07:39:43

+0

添加onload每个图像,所以当一个人加载其他馅饼 – 2013-02-12 13:24:34

0

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