The problem is caused because you add a plugin(loadingoverlay) to jquery in the global space. And then Moodle comes along and re-loads jquery into that space and all your hardwork is lost.
If you want this to work you need to delay the loading of your script until Moodle has loaded jquery. Pretty much as your code does.
Though its not your preferred quick fix solution, I will suggest my own solution which can certainly solve this issue, and will be much more robust into the future.
- Use the Generico filter https://moodle.org/plugins/filter_generico
(and Atto plugin if you wish) - Creating a "loadingoverlay" Generico template
- Add template filter strings to each of your page summaries, probably: {GENERICO:type=loadingoverlay}
This has two main benefits for you. Firstly you will not run into jquery problems because Generico creates AMD modules on the fly from your javascript. Secondly you can manage all the loading overlay logic from a single place. If you need to change it, you just have to do so in one place , and it will be reflected throughout the site.
These two templates demonstrate the addition of JQuery plugins. They are both presets included with the Generico filter. So to view the template code just install Generico and create a template from the appropriate preset.
AMD compatible: Codebox: https://moodle.org/plugins/view.php?id=2097
Not AMD compatible: Lightbox2: https://moodle.org/plugins/view.php?id=2099