How to prevent admin layout page load before the script?

Question

I am trying to load the script before the layout page load, please check my scenario in my attached video,

https://share.getcloudapp.com/p9uAR4JX

jQuery(window).load(function() {

    jQuery('div.custom-metabox').hide();

    setTimeout(function(){
        jQuery('div.custom-metabox').fadeIn('slow');
    },1000);
    
    });

but the layout is loading before the page. how should I prevent this, I have enqueued the script like this,

 wp_enqueue_script( 'custom', include_plugin_url( 'assets/js/custom.js' ), array(), $version, false );

any help will be appreciated

Possible to initially hide `div.custom-metabox` with CSS? That might help avoid the content showing before the window's load event fires. — showdev, May 24 '21 at 04:13
Another idea is to hide content as soon as the document is ready, rather than waiting for the window to load. See [window.onload vs $(document).ready()](https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready). — showdev, May 24 '21 at 04:19
As examples, check out [this answer](https://stackoverflow.com/a/8076375/924299) and [this one](https://stackoverflow.com/a/7861201/924299). — showdev, May 24 '21 at 04:25

score 3 · Accepted Answer · answered May 24 '21 at 04:22

3

You can hide div.custom-metabox by css:

div.custom-metabox{display:none;}

Register the script in footer and tells the dependancy:

wp_enqueue_script( 'custom', include_plugin_url( 'assets/js/custom.js' ), array('jquery'), $version, true);

Then you can just fade in this section after 1Sec:

jQuery(document).ready(function() {

    setTimeout(function(){
        jQuery('div.custom-metabox').fadeIn('slow');
    },1000);
    
});

answered May 24 '21 at 04:22

Rakesh Mistry

101
2

accepted, thanks :D – Nayeem Hyder Riddhi May 24 '21 at 04:36
My Pleasure! @NayeemHyderRiddhi – Rakesh Mistry May 24 '21 at 04:40

How to prevent admin layout page load before the script?

1 Answers1