My goal is to prevent clicking on an image element until all the resources have finished loading, enabling the click only after the window.load() or when document.readystate reaches complete status. While this code works well in Chrome and Safari, I am facing challenges in making it work in IE browsers. Can anyone provide assistance on how to achieve the same functionality in IE browsers?
CSS:
.loading {
pointer-events: none;
}
JQuery:
$(window).load(function() {
if ($('.productthumbnail').hasClass('loading')) {
$('.productthumbnail').removeClass('loading');
}
});
if (document.readyState === "interactive" || document.readyState ===
"loading") {
$('img.productthumbnail').addClass('loading');
}
//$('.loading').click(function(){return false;});
if (document.readyState === "complete") {
$('img.productthumbnail').removeClass('loading');
}
I attempted to add the following code below the if statement, but it continues to disable the click function even after the page has fully loaded.
$('.loading').click(function(){return false;});