0

I am trying to disable click on an image element until all the resources have been loaded, as in enable the click after the window.load() or document.readystate in is complete status. The below code seems to work fine in Chrome and Safari, but am having difficulties to get this done in IE browsers. Can someone please help with how to have the same thing for IE browsers as well.

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 tried to add this code below the if statement but it seems to disable click even after the page has loaded.

 $('.loading').click(function(){return false;});

2 Answers2

0

after the page has loaded you'll need to unbind that click method.

$(".loading").unbind("click");
j011y
  • 111
  • 3
0

Try doing below code

CSS

body{
    pointer-events:none;
}

JS

$(document).ready(function(){ //on page all
    $('body').css('pointer-events','all'); //activate all pointer-events on body
})

;

Hope it's works....

Aqib Zaman
  • 265
  • 2
  • 8
  • 17