I am trying to have an image(div) overlay the entire view port while ajax call is under way using the .load() method. The overlay should fade away once the load is complete. However, even by using the load callback, the overlay fades away before the images load. With a slower internet connection the user can see the images loading one by one.

The current WIP can be found at (click **work** to see the bug).

**My load Function**

```
function loadContent(link) {
var loadUrl = $(link).attr("href");

showOverlay(function () {
    $('#holder').load(loadUrl, function () {
        $('#content').scrollTop(0)
         hideOverlay();
    })
  });
};

```

**The overlay Functions**

```
function showOverlay(callback) {
   $('html').addClass('overlay-visible');
   $('#overlay').fadeIn(500, callback);
};

function hideOverlay(callback) {
  $('html').removeClass('overlay-visible');
  $('#overlay').delay(100).fadeOut(500, callback);
};

```

Thanks in advance to anyone that can help me with this!