Казахте, че gif се зарежда, след като изтеглите ajax. Ако това е вашият проблем, можете да извикате своя ajax pull, след като gif бъде зареден, като направите:

yourimg = new Image(); 
yourimg.src = "loading.gif";

yourimg.loadEvent = function(url, image){
    var overlay = $('<div id="overlay" />');
    overlay.append(image).css('opacity', '0.5').insertAfter('body');
    //call whatever you want here. your image is loaded.
}

yourimg.load();

От уебсайта на jquery

The load event is sent to an element when it and all sub-elements have been
completely loaded. This event can be sent to any element associated with a URL: 
images scripts, frames, iframes, and the window object.

Трябва да покажете своя div, докато тялото се зарежда, и да го скриете при зареждане. Не съм сигурен обаче дали това е, което питате. Ако не е функцията setTimeout може да е това, което искате искам.

Има малък проблем във вашия код:

window.setTimeout(function() {
$(document).ready(function() {
...

В този код задавате времето за изчакване на функцията, която прави това:

function() {
    $(document).ready(function() {
        $('#overlay').remove();
    });
}

По принцип той изчаква секунда и след това добавя слушател към събитието за готовност на документа и в този слушател изпълнява действителната работа. Така че в случай, че събитието ready е задействано през първата секунда - функцията няма да се изпълни изобщо.

Вашият код трябва да изглежда така:

$(window).load(function() {
    setTimeout(function() {
        // Do the dom manipulations remove the placeholder
    }, 1000);
});

Заместителят ще бъде премахнат секунда след събитието за зареждане. Имайте предвид, че събитията "зареждане" и "готовност" са различни. И "зареждане" не гарантира, че DOM ще бъде анализиран или изобразен.