JavaScript在元素加载后立即绑定元素事件
JavaScript bind element events as soon as element is loaded
我想在加载DOM元素时立即对其进行操作(在本站点或Google上搜索没有发现任何内容,但很难用几句话解释这一点)。例如,当一个大页面加载时,我想隐藏/添加onlick
事件等。元素一旦出现在用户的屏幕上,而不是在$(document).ready()
上。我写了一个简单的类(只是为了训练,闭包对我来说是新的,所以可能有很多错误),做我想要的,但我想使用更好的东西用于商业用途(在我正在帮助开发的网站上)。这是我的源代码:
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!');
});
UPD:为了使这个问题更有趣一点,因为它似乎太具体了,我必须补充:大多数浏览器在完全加载之前就开始渲染页面(这似乎由于某种原因不为人所知),这里有一些链接:
- http://en.wikipedia.org/wiki/Incremental_rendering
- 浏览器何时开始渲染部分传输的HTML?
- http://www.vbulletin.org/forum/showthread.php?t=161099
所以,我的问题应该更广泛地知道,因为这个增量页面加载为开发人员增加了很多问题:用户可以在页面加载之前点击非工作按钮,加载时JavaScript隐藏的一些东西可能会显示,它们可能是丑陋的,等等(这是我的问题的例子)。其他开发人员是否忽略了这个问题?如果我说错了,请指正。
如果您担心的是不希望用户在页面最终完成之前看到页面,那么您可能可以直接进行DOM修改,例如:
<a href="#" id="test">Test</a>
<script type="text/javascript" src="enhancePage.js"></script>
因为所讨论的节点在解析脚本之前就存在于DOM中,所以您可以使用它。
相关文章:
- 将动态元素绑定到函数;只剩下一个绑定
- Knockout绑定是膨胀的html(表单元格),如何使用javascript创建绑定或从父元素绑定
- 使用Kendo的动态HTML元素绑定
- 将多个元素绑定到同一onclick
- 如何在AJAX驱动的应用程序中优化元素绑定
- 使用AngularJS UI路由器时出现元素绑定问题
- 如何将 DOM 元素绑定到自定义 $.touchpress 事件
- 如何在React Native中为ListView中的每个元素绑定函数
- 对克隆的image元素绑定onclick事件
- 将DIV元素绑定到溢出滚动条
- 使用ng repeat将表单元素绑定到角度中的新对象
- 将元素绑定到不同帧中的现有 AngularJS 作用域
- KNOCKOUTJS 将多个输入元素绑定到一个可观察量
- 如何将两个 html 元素绑定在一起,当第一个元素被删除时,第二个元素也从 DOM 中删除
- OOJS-将每个元素绑定到一个特定的点击
- 真正阻止元素绑定-取消绑定元素-AngularJS
- 如何在jQuery中将多个元素绑定到多个事件
- Vue.js-将同名的无线电元素绑定到数组
- 将两个数组元素绑定为一个
- Flotr2 -安全地销毁图形元素以及为该元素绑定的所有事件