Home/ Questions/Q 7736387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:43:08+00:00

So I have this page that has some basic custom tabs: http://demo.unlockedmanagement.com/users/view/2 * NOTE

  • 0

So I have this page that has some basic custom tabs:

http://demo.unlockedmanagement.com/users/view/2

*NOTE it will ask for a login, just use admin/password and then go to that url.

Loading this page normally (except for the first time) and everything looks fine. If I do a hard refresh of this page, the tabs/tabbed content appears as if the javascript has not yet been applied and the javascript only seem to be applied after the images are loaded. The thing is that my javascript to apply the tabs looks like this (you can look at /javascript/base.js to see the whole thing):

$(document).ready(function ()
{
    //some code ...

    //tabbed data
    if($('.tabbed-data').length > 0)
    {
        $('.tabbed-data').tabs();
    }

    //some more code ...
});

I thought that using $(document).ready() will not wait for all the images to load so why am I seeing the delay in the javascript we doing a hard refresh?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The script you are using is correct, $(document).ready() only waits until the DOM has loaded. It does not wait for the images to load. Therefore the problem is most likely to do with where you are loading the scripts.

    In your code, you have placed the <script> tags at the base of the code. Why is that? This is most likely the issue as the browser will work its way down the page loading the assets in the order they appear.

    Place you <script> tags in the <head> part of the page to load them before the images.

    The best way to test if this is the issue, is simply placing this in your header and see if it fires before the images load:

    <script>
$(document).ready(function ()
{
    //some code ...

    //tabbed data
    if($('.tabbed-data').length > 0)
    {
        $('.tabbed-data').tabs();
    }

    //some more code ...
});
</script>
    • 0