0

I have a page that is full of divs and the JSGraphIt.initPageObjects() draws connectors between the divs. The div and connector information is populated from a db. I want to add a load animation to the page as the divs are populating and connectors are being drawn, so I added the loader div and $(".loader").fadeOut("slow"); to the window load function.

However, there is a long delay - about a second or two - before the loading animation shows, which defeats the purpose of the animation.

I noticed that if I remove the JSGraphIt function, the animation starts right away, but I cannot remove that function. I have also tried moving the animation to the document ready function instead but then the loading animation doesn't show at all.

Thanks in advance for your help.

<script type="text/javascript">
function onLoad()
{
    JSGraphIt.initPageObjects();
}

$(window).load(function() {
    $("#closeprint").hide();

    // Set Canvas Size
    var height = $(window).height();
    var width = $( window ).width();
    canvasHeight = height - 285;
    $("#container").css({"height" : canvasHeight});
    $("#header").css({"min-width" : width});
    $("#container").css({"min-width" : width});
    $("#legend").css({"min-width" : width});
    $("#footer").css({"min-width" : width});

    $(".loader").fadeOut("slow");
});

$(function() {
 Some other functions
});
</script>
user1067577
  • 247
  • 1
  • 7
  • 15
  • When does the `onLoad` function with `JSGraphIt.initPageObjects()` get executed? – i-- Apr 08 '14 at 14:17
  • the body tag calls the onLoad function for JSGraphIt – user1067577 Apr 08 '14 at 14:48
  • A quick suggestiong would be to move your preloader code in the same `onLoad` function above the `JSGraphIt.initPageObjects()` line. Because `JSGraphIt.initPageObjects()` probably hogs the process and the rest of the code has to wait for processing juice release. Better solution would have to be more delicate for which you could get ideas from posts like [this one](http://stackoverflow.com/questions/7511352/load-specific-image-before-anything-else). – i-- Apr 08 '14 at 16:30
  • Thanks @i-- I tried that and it didn't work but I was able to use JQuery's $.deferred following this post http://stackoverflow.com/questions/12116505/wait-till-a-function-is-finished-until-running-another-function to get what I needed – user1067577 Apr 08 '14 at 18:42
  • Did not know of the `$.Defferred()` until now. Neat. – i-- Apr 08 '14 at 18:57

0 Answers0