jQuery 자동 완성으로 이미지로드

Question

jQuery 자동 완성 플러그인을 사용하여 내 DB의 사진과 함께 사용자 목록을 표시합니다. 사용자 이미지없이 결과를 표시하면 자동 완성이 매우 빠릅니다. 그러나 이미지의 경우 이미지를로드하고 표시하는 데 약간의 시간이 걸립니다. 이미지가 다운로드되어 표시되는 것을 이해합니다. 그러나 페이스 북에서는 이미지가 즉시 표시됩니다. 페이스 북은 값을 반환하는 데 높은 구성 서버를 사용하고 일부 다른 기술을 사용하여 이미지를 표시한다는 것을 알고 있습니다. 이미지를 DB에 저장할 수있는 방법이나 즉시 액세스 할 수있는 다른 방법이 있습니까? 웹 서비스를 사용하여 json 형식의 값을 반환합니다.

Answer 1

텍스트 데이터를로드 한 후 이미지를로드 할 수 있습니다. 예를 들어 실제 이미지 URL (<img class="searchThumb" src="blank.gif" img_source="/real_img_url.jpg"/>)이 포함될 빈 이미지 (<img class="searchThumb" src="blank.gif"/>)와 img_source attr 인 결과를 만들 수 있습니다. 또한 이미지를 표시하는 open 이벤트에 기능을 추가하십시오.

간단한 예 (그냥 예이고 나는 그것을 테스트하지 않았다)

$(function() { 
    function showImages(){ 
     $(".searchThumb").each(function(){ 
      $(this).arrt("src", $(this).attr("img_source")); 
     }); 
    } 
    $("#birds").autocomplete({ 
     source: "search.php", 
     minLength: 2, 
     open: showImages() 
    }); 
}); 

UPD

$(function() { 
    function showImages(){ 
     $(".searchThumb").each(function(){ 
      $(this).arrt("src", $(this).attr("img_source")); 
     }); 
    } 
    function formatItemFn(row,pos,count,term){ 
     // Here is formatting like I described before 
     if (pos==count) showImages(); 
    } 
    $("#birds").autocomplete({ 
     source: "search.php", 
     minLength: 2, 
     formatItem: formatItemFn() 
    }); 
}); 

Answer 2

이 참조 :

http://www.bennadel.com/blog/1862-Be-Careful-When-Including-Images-In-jQuery-Auto-Suggest.htm