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

Question

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

Answer 1

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