Record the html changes when the screen load?

Question

I'm using chrome, is there a way to record the html behavior/changes whenever I load a page, or whenever I click a button, so that I can analyse the loading pattern of the html?

I need to do this is because I'm using a scrollbar plugin, and whenever the page load, if the plugin is currently loading there will be a class name attach to the html tag (e.g. scrollLoad). Once the plugin is loaded, the class will be removed.

The problem is I need to get the right class name so that I can target it inside my css..., I'm wondering is there a way to preview the loading of a html page.

Answer 1

you can add a script, that is triggered on each page load. With jQuery you could check if a page is loaded completely. You could go the other way arround and add the loading class by default and remove it, as soon as the loading is completed

$(function(){
    console.log("DOM ready");
    $('#element').removeClass('scrollLoad');
}); 

Answer 2

Maybe you can use the on() with the 'change' attribute? http://api.jquery.com/on/