Laden von Bildern mit jQuery Autocomplete

Question

Ich verwende das jQuery Autocomplete-Plugin, um eine Liste von Benutzern zusammen mit ihren Fotos aus meiner Datenbank anzuzeigen. Wenn ich die Ergebnisse ohne Benutzerbilder anzeigen lasse, ist die automatische Vervollständigung sehr schnell. Bei Bildern benötigen die Bilder jedoch einige Zeit zum Laden und Anzeigen. Ich verstehe, dass die Bilder heruntergeladen und dann angezeigt werden. In Facebook werden die Bilder jedoch sofort angezeigt. Ich verstehe, dass Facebook Hochkonfigurationsserver verwendet, um Werte zurückzugeben, und andere Techniken zum Anzeigen von Bildern verwendet. Gibt es eine Möglichkeit, wo ich meine Bilder auch in DB oder irgendwo anders speichern kann, auf die man sofort zugreifen kann? Ich verwende Webdienste, um Werte im JSON-Format zurückzugeben.

Answer 1

Sie können versuchen, Bilder nach geladenen Textdaten zu laden. Zum Beispiel können Sie Ergebnisse mit leeren Bildern (<img class="searchThumb" src="blank.gif"/>) mit attr img_source, die URL zu realen Bild (<img class="searchThumb" src="blank.gif" img_source="/real_img_url.jpg"/>) enthalten, erstellen. Fügen Sie auch die Funktion open Ereignis hinzu, das Bilder anzeigt.

Einfaches Beispiel (es ist nur beispielhaft und ich habe es nicht getestet)

$(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

sehen:

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