2013-02-09 182 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

您可以加載縮略圖並將其拉伸至大圖像的大小,它將用作模糊的佔位符,直到全尺寸圖像可用。淡出低分辨率圖像以顯示下方的完整圖像。這是假設有一個簡單的方法來分辨圖像何時加載。