jQuery: Use function instead of $(document).ready

Question

I am using the Piety plugin on a website that displays leaderboard profiles. Each profile contains a different amount of elements to which Piety is applied and I have found that $(document).ready is triggered before all these elements have loaded.

My solution so far has been to move Piety from $(document).ready to $(window).load - Which works great for most of the profiles. However, the people at the top of the leaderboard have extremely large profiles, which creates quite a wait before $(window).load will kick in and work through all of the Piety elements.

I am wondering if there would be any performance issues if I was to call each pie individually as they are loaded, instead of waiting for $(window).load and letting jQuery do it all in one go.

Something like..

From:

$(window).load(function(){
   $("span.pie").peity("pie", { ... })
}); 

To:

function loadPie(id){
    $("#"+id).peity("pie", { ... })
}

..and then loadPie after each element.

Answer 1

If the profiles are loaded asynchronously after DOM ready, then yes, initializing peity on each one after they are loaded makes sense. $(window).load() waits until everything else on the page (profile related or not) is completely loaded.

One thing to consider is the resources piety requires for each instance. Depending on how many profiles / pie charts you have, it may be faster to call them all at once after the last profile is loaded (but before window.load). I will try and update this with a jsperf in a bit... headed to work now :)