2013-02-09 4 views
0

두 가지 방법으로 시도해 보았습니다. 두 가지 방법으로 문제를 발견했습니다.큰 이미지로드 중 페이지로드 시간

  1. 아약스 게시물의 이미지를로드하고 이미지 소스를 업데이트하는 중입니다.
  2. 클래스가 "none"이고 jquery가 이미지를 숨기거나 표시하도록 설정된 "li"목록의 모든 이미지를로드하는 PHP 함수입니다.

제 문제는 이러한 이미지가 최소 1440 x 960 픽셀입니다. 따라서 아약스 포스트로로드하면 전체 이미지를 보여주는 데 시간이 걸리고, PHP 루프로로드하면 페이지로드 시간이 오래 걸립니다. 나는이를 spead 할 수있는

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; 
} 

아무것도 : 여기

내 PHP 루프 기능의 내 예입니다?

+0

여기에서 자세히 설명합니다. http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image –

+0

나에게 보여줄 수있는 경우 여러 번 (600) 큰 이미지를 한 번에로드하는 방법에 대해 확실하지 않습니다. 예를 들어 또는 어떤 도움이 될 것입니다 가장 좋은 방법은 말해 .. 답변을 찾고 그냥 좋은 조언 :) – Andres

답변

0

나는 당신의 최선의 해결책이 방법 사이에다는 것을 짐작할 것입니다. PHP를 통해 영상 정보를 전송하지만 페이지로드 후 자바 스크립트로 그들을로드 ....

<?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>"; 
} 
?> 

을 그냥 < 리>의 및 < IMG>의 삽입 myImages에 페이지로드 후 자바 스크립트와 foreach 문을 실행 태그.

+0

이 효과가 있지만 한 번에 하나의 이미지를로드와 함께 가야했다, 그들이 너무 큰 원인 그리고로드에서 페이지를 묶어 :(하지만 어쨌든 고마워 – Andres

+0

각 이미지에 부하를 추가하므로 다른 이미지가로드 될 때 타르트 –

0

썸네일을로드하고 큰 이미지의 크기로 늘릴 수 있습니다. 전체 크기 이미지를 사용할 수있을 때까지 모호한 자리 표시 자 역할을합니다. 저해상도 이미지를 페이드 아웃하면 전체 이미지가 아래에 표시됩니다. 이것은 이미지가로드 된시기를 쉽게 알 수 있다고 가정합니다.