загружать изображения с помощью jquery-ajax после загрузки страницы

Я хочу загрузить 100 изображений (110x110 px) из моей базы данных.

Итак, во-первых, я назвал следующий код в конце моего html файла:

var images = "";
for(var i = 0; i < 100; i++){
    $.ajax({
        type: "POST",
        url: "getImages.php",
        data: {artist: users[i]},
        success: function(res) {
            images += '<li><img src="' + res + '" /></li>';
        },
        async: false
    });
}

$("#list").append(images); // add images to my page (#list is an ul element)

$( document ).ready(function() {
    displayWithEffect(); // shows all images
});

Проблема в загрузке 100 изображений (около 6 секунд), и мой веб-браузер ничего не отображает до этого.

Итак, я изменил свой код, чтобы сначала загрузить все содержимое, а затем изменить источники img (src). Поэтому я сделал это:

var images = "";
for(var i = 1; i <= 100; i++){
     images += '<li><img src="" /></li>';
}

$("#list").append(images); // add images to my page

$( document ).ready(function() {
    var i = 0;
    $("#list li").each(function(idx, li) {
        var product = $(li);
        $.ajax({
            type: "POST",
            url: "getImages.php",
            data: {artist: users[i]},
            success: function(ret) {
                $(li).children(":first").attr("src", ret);
            },
            async: false
        });
        i++;
    });
    displayWithEffect(); // shows all images
});

Но я все равно получаю тот же эффект, что и раньше.

Как я могу полностью загрузить и отобразить все содержимое моей страницы, кроме первых 100 изображений, а затем загрузить эти изображения (за некоторой анимацией loading.gif) с помощью ajax?