jquery not loading fully before page loads

Question

I have a wordpress website that although works is not loading fully in a large office where the bandwidth is limited to each machine. so when the website loads in such a location it does not load all of the jquery and thus we have display issue. The browser used in that office is IE 7 and 8. i've tested the site on my version of IE 7 and 8 and all looks fine with no script errors which makes me think it has to be bandwidth stopping the scripts form loading.

So i guess my question is how do we preload scripts that are being added via plugins in wordpress?

Answer 1

The best way to avoid asset conflicts and in your case, loading the scripts first and sequentially is by properly enqueueing the files. To do this you must use wp_enqueue_script

a good way to do this is to put it as part of a function in your functions.php file like so

1. create a function
2. insert wp_register_script into the function
3. then insert wp_enqeue_script into the function
4. use add_action(), to initlize the enqueue-ing process

---

so -

function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

---

In this example the function load_scripts() would then be called in the header.php file. Take a look at wp_register_script as well to get a better understanding of the arguments for that as well, but in summary -

first argument: is the name you want to use as reference to this script

second argument: is the actual link to the script

third argument: is the script that you want to load before this script (the script you want to wait for before this script loads)

---

and for wp_enqueue_script, the argument is merely a reference to the name (the first argument of wp_register_script)

---

the add_action function arguments:

first argument: the function you are "hooking" into

second argument: the function you created that will be "hooked"