Need help with jQuery

Job ID: 32834708

Budget: €8 – €30 EUR

I don't have any experience with jQuery but am tasked with fixing a bug :-)

1. Open the Javascript console in your browser and visit https://www.softwaretown.de/cutout

2. This is an HTML page (Joomla) that uses jQuery and the twentytwenty.js Javascript module for showing a slideable image.

3. twentytwenty.js needs to be initialized before it can be used. When I initialize it from $(document).ready, I can access the function twentytwenty().

4. However, placing it in $(document).ready makes the code fail from time to time in Chrome. It should be done in $(window).on("load").

The problem is that if I am doing it here, the function twentytwenty is undefined (you can see this in the Javascript log window).

If you look at the HTML source, you can see that $(document).ready runs before $(window).on("load").

Why can $(document).ready see the function but $(window).on("load") can't?
Related categories: JavaScript jQuery / Prototype