Question

I want to hide a div using Javascript, as soon as the page gets loaded in the browser. I am able to do that, if i use the following code :

document.getElementById("div_id").style.display='none';

But, when i try to do the same thing using JQuery,i notice that the div is visible for a couple of seconds after page loads,and then it becomes hidden. The JQuery code i use is

$(document).ready(function() {

$("#div_id").css('display','none');

});

The same thing happens, if i use $("#div_id").hide(); Is this because im using a library,which would slow down the process a bit,instead of directly using document.getElementById ? . Any way to fix this ?

Thank You.

Answer 1

First, use $("#div_id").hide();. It’s more idiomatic for jQuery.

Second, it’s because you’re using $(document).ready. Usually, that event doesn’t fire until the DOM is available for use. However, because of the way bindReady() is implemented, it’s possible on some browsers for this event to be equivalent to the onload event, which won’t fire until everything is loaded. Unfortunately, the only way that I know of to get around this (that doesn’t cause problems for disabled users who can’t use JavaScript because of a screen reader) is to set a short timeout (say 50ms) and repeatedly check for the existence of $("#div_id") while the page is loading. This is a horrible hack, and I hesitate to recommend it, but it should work. That said, you’re almost better off just accepting the flash of content, knowing that most users won’t see it.