隐藏内容到dom-load

Question

I am making a chrome extension that is supposed to beautify a certain site. I am hiding all elements on domload except one. But the problem with it is that everytime the site loads ,first everything gets loaded, and then it gets hidden. here is my code

window.onload = function(){

var all = document.getElementsByTagName("div");
var viewer = document.getElementById("viewer").style;

for (var i=0, max=all.length; i < max; i++) {
    all[i].style.visibility='hidden';
}

viewer.visibility='visible';

};

I hope there is a better way of doing this than what I am doing right now, which is basically loading all the content hiding all the content and then making a certain component visible. This whole process is quite slow and the user can see the content I am trying to hide on pageload.

Is there any way to specify via javascript which content is to be loaded , or to make the whole process fast enough for it to be not noticed ?

Answer 1

jQuery here would be your friend. It is very fast.

$(document).ready(function() {
  $('div').not('#viewer').hide();
});