Magnify script not loading on page load, but page refresh

[goldlilys]

Is it possible to check why your script would not work on page load, but only on page refresh?

I was able to make the simple demo work fine on page load, but when I added it to a wordpress website, the script only seems to work on page refresh, but not page load. I've been modifying the call to

(function($) {
$zoom = $(".zoom").magnify({
magnifiedWidth: 6000,
magnifiedHeight: 741,
afterLoad: function () {
console.log("Magnification powers activated 5!");
},
src: '[imageSrc]'
});

    $('html').on({

        magnifystart: function () {
            console.log('\'magnifystart\' event fired 5');
        },
        magnifyend: function () {
            console.log('\'magnifyend\' event fired 5');
        }
    });

})( jQuery );

so it loads even when not all is loaded yet, but even that doesn't work. It does display the "Magnification powers activated 5!" on the console, but the magnify class does not get added to the html element and the magnifystart and magnifyend calls do not log on console. It only shows up when I refresh the page.

But creating an auto refresh doesn't fix the issue either. Is it possible to use body instead of html? Not sure if that makes a difference, but what do you think could be the cause of it not firing during page load?