Loading images with jQuery autocomplete

Question

I am using the jQuery autocomplete plugin to display a list of users along with their photos from my DB. When I display the results without user images, the autocomplete is very fast. However with images, the images take some time to load and display. I understand that the images get downloaded and then gets displayed. However in facebook, the images are displayed instantaneously. I understand that facebook uses high configuration servers to return values and uses some other techniques to display images. Is there a way where-in I can store my images too in DB or somewhere else which can be accessed instantaneously? I am using web services to return values in json format.

Answer 1

You can try loading images after text data loaded. For example you can create results with blank images (<img class="searchThumb" src="blank.gif"/>) with attr img_source which will contain URL to real image (<img class="searchThumb" src="blank.gif" img_source="/real_img_url.jpg"/>). Also add function to open event which will show images.

Simple example (it's just example and I didn't test it)

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

See this:

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