Загрузка изображений с автозаполнением jQuery

Question

Я использую плагин автозаполнения jQuery, чтобы отобразить список пользователей вместе с их фотографиями из моей БД. Когда я показываю результаты без пользовательских изображений, автозаполнение выполняется очень быстро. Однако с изображениями изображения требуется некоторое время для загрузки и отображения. Я понимаю, что изображения загружаются, а затем отображаются. Однако в facebook изображения отображаются мгновенно. Я понимаю, что facebook использует серверы высокой конфигурации для возврата значений и использует некоторые другие методы для отображения изображений. Есть ли способ, в котором я могу хранить мои изображения тоже в БД или где-то еще, к которому можно получить доступ мгновенно? Я использую веб-службы для возврата значений в формате json.

Answer 1

Вы можете попробовать загружать изображения после загрузки текстовых данных. Например, вы можете создавать результаты с пустым изображением (<img class="searchThumb" src="blank.gif"/>) с attr img_source, который будет содержать URL-адрес реального изображения (<img class="searchThumb" src="blank.gif" img_source="/real_img_url.jpg"/>). Также добавьте функцию к событию 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