元素加载后，Javascript绑定元素事件

Question

I'm new to javascript so maby this is well-known/stupid/useless, but I want to make things happen with DOM elements as soon as they are loaded(found nothing with search on this site or google, but it is hard to explain this with few words). For example when a big page is loading I want to hide/add onlick events/etc. to elements as soon as they appear on user's screen not on $(document).ready(). I wrote a simple class(just for training, closures are new for me so there may be lots of errors) that does what I want but I want to use something better for commercial use(on the site I'm helping to develop). Here is my source code - maby it will explain what I want better then this post: I'm new to english too (:

function MY_loader() {
    function container() {
        this.add_event = function(new_event,obj_selector,settings) {
            if(typeof(settings)!='object') {
                settings={};
            }
            if(typeof(settings.event_id)!='string') {
                settings.event_id=gen_new_event_id();
            }
            settings=$.extend({},default_settings,settings);
            settings.obj_selector=obj_selector;
            settings.event=new_event;
            events[settings.event_id]=settings;
        }

        this.execute_events = function(if_force) {
            if(typeof(if_force)=='undefined') {
                if_force=false;
            }
            if(html_is_loaded&&!if_force) {
                return;
            }
            var temp_obj;
            for(var event_name in events) {
                temp_obj=$(events[event_name].obj_selector);
                if(temp_obj.length || (html_is_loaded && events[event_name].if_force)) {
                    temp_obj.each(function() {
                        if(events[event_name].expect_multiple) {
                            if($(this).data('my_loader_'+events[event_name].event_id+'_executed')) {

                                return;
                            }
                        }
                        if(events[event_name].event_type!='func') {
                            $(this).bind(events[event_name].event_type+'.'+events[event_name].event_id,events[event_name].event);
                        }
                        else {
                            events[event_name].event($(this));
                        }
                        if(events[event_name].expect_multiple) {
                            alert('here');
                            $(this).data('my_loader_'+events[event_name].event_id+'_executed',1);
                        }
                    });
                       //alert(events[event_name].obj_selector+' '+events[event_name].event_type);
                    if(!events[event_name].expect_multiple) {
                        delete events[event_name];
                    }
                }
            }
            if(!html_is_loaded) {
               var cur_time=new Date().getTime();
               setTimeout('MY_loader().execute_events();',Math.max(Math.min(tick_time-(cur_time-last_tick_time),tick_time),0,min_tick_diff));
               last_tick_time=cur_time;
            }
        }

        this.html_is_loaded_set=function(if_html_is_loaded) {
            html_is_loaded=if_html_is_loaded?true:false;
        };

        this.html_is_loaded_get=function() {
            return html_is_loaded?true:false;
        };

        return this;
    }
    function instance(if_strat) {
        if(typeof(class_is_loaded)=='undefined'||!class_is_loaded) {
            load_class();
        }
        return container(if_strat);
    }

    var load_class=function() {
        this.class_is_loaded=true;
        this.events = {};
        this.allowed_event_id_chars='abcdefghijklmnopqrstuvwxyz0123456789';
        this.default_settings={
            'event_type':'click',
            'if_force':false,
            'expect_multiple':false
        };
        this.tick_time=500;
        this.min_tick_diff=100;
        this.last_tick_time=0;
        this.html_is_loaded=false;
        MY_loader().execute_events();
        $(document).ready(function(){
            MY_loader().html_is_loaded_set(true);
            MY_loader().execute_events(true);
        });
    }

    var gen_new_event_id=function() {
        for(var new_id=gen_random_id();typeof(events[new_id])!='undefined';new_id=gen_random_id());
        return new_id;
    }

    var gen_random_id=function() {
        var allowed_event_id_chars_size=allowed_event_id_chars.length;
        var new_id='';
        for(var i=0;i<10;i++) {
            new_id+=allowed_event_id_chars[get_random_int(0,allowed_event_id_chars_size-1)];
        }
        return new_id;
    }

    function get_random_int(min, max)
    {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    return new instance();
}
//Add click event to #some_selector (once and dont check after it)
MY_loader().add_event(function() {
    alert($(this).val());
}, '#some_selector');
//Hide elements as soon as they are loaded.
//We expect multiple elements with this selector, so it will
//check for this elements untill document is loaded, but this function
//will be applied only one time for each element.
MY_loader().add_event(function(obj) {
    obj.hide();
    alert('This should happen before DOM is completely loaded!');
}, '.some_other_selector',{'event_type':'func','expect_multiple':true});
//This alert should be outputted the last
$(document).ready(function(){
    alert('Document is fully loaded!');
});

Thank you all in advance!

UPD: To make this question a little bit more interesting as it seems too specic I must add: most of the browsers start page rendering before it is completely loaded(this seems to be not well-known for some reason), here are a few links:

1. http://en.wikipedia.org/wiki/Incremental_rendering
2. When do browsers start to render partially transmitted HTML?
3. http://www.vbulletin.org/forum/showthread.php?t=161099

So, my problem should be more widely known as this incremental page loading adds lots of problems for developer: user can click on non-working buttons before page is loaded, some things that are hidden by javascript on load may show and they can be ugly, etc.(this are examples from my problem). Do other developers just ignore this problem? Please, correct me if I am wrong.

Answer 1

If your concern is that you don't want users to see the page before it is final, you can probably get away with doing the DOM modification straightaway, eg:

<a href="#" id="test">Test</a>
<script type="text/javascript" src="enhancePage.js"></script>

Because the node in question exists in the DOM before the script is parsed, you can work with it.