如何在 jQuery 中以编程方式触发事件？
我有一个加载圆角 div 的页面。 在每个 div（包括所有内部 div、该 div 内的跨度）上，我调用许多与它们相关的事件。 现在我面临的问题是加载时间。 当我将鼠标悬停在主 div 上时，我们是否有任何方法可以首先在“就绪”函数中加载圆角脚本并动态加载其余事件？ 任何减少我的加载时间的方法都会有很大的帮助！
例子：
$(function(){
$('.inner').corner({
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 }
});
// loadDivEvents() in this we call the rest of the events upon
// mouseover or any other event without multiple calls
});
function loadDivEvents(){
//this may have many events/ajax calls
}
I have a page which loads divs of rounded corners. And on each div (including all the inner divs, spans inside this div) I call many events related to them. Now the problem I'm facing is load time. Do we have any approach to load the script for rounded corners first in "ready" function and rest of the events dynamically when I mouse over on the main div? Any approach which reduces my loading time would be of great help!
Example:
$(function(){
$('.inner').corner({
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 }
});
// loadDivEvents() in this we call the rest of the events upon
// mouseover or any other event without multiple calls
});
function loadDivEvents(){
//this may have many events/ajax calls
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果我可以问的话，加载时间的实际问题是什么？
当页面首次加载时，任何与事件相关的函数（通常）只是与页面中的元素绑定，以便如果事件发生时，与事件相关的函数将执行。 所以我不知道这是否真的会影响您的页面加载时间。
影响页面加载时间的是大量与事件相关的函数，您试图在页面加载时一次关联一个函数。
例如，如果我有 10 个列表，每个列表有 10 个列表项，并且我希望任何列表项在悬停时变为绿色 - 如果我有分别定义这 100 个事件中每一个事件的 javascript，这可能会增加我的开销。
但！
如果我将这些事件的绑定移至页面加载之后，并且当我第一次将鼠标悬停在主 div（或窗口，或几乎总是接下来发生的任何事件）上时发生这种情况，那么开销就会传递给该事件。 页面已加载，但现在在处理事件时被冻结。 我的用户真的很恼火，因为他无法向下滚动，如果问题足够严重，他就无法关闭页面或切换到另一个窗口。 当页面需要永远加载时，他就预料到会出现这种情况，现在，当他访问您的页面时，总会发生这种随机冻结。
因此，如果存在页面加载问题，更好的解决方案可能是查明是否存在冗余或不必要的功能正在运行。 在我给出的上面的例子中，我可以简单地说“当鼠标悬停在任何列表项上时，它们会变成紫色”，这是一个绑定，而不是 100 个。或者我可能犯了一个简单的错误，让这 100 个绑定中的每一个实际上都做了一些事情（就像检查列表项的值），它实际上只需要在触发它的事件之后执行，而不是在页面加载期间执行。 这将是 100 个停顿，我什至不想在页面加载期间发生一次。
What is the actual issue with load time, if I may ask?
When the page is first loaded, any event-related functions are (usually) just getting tied to the elements in the page so that if and when the event occurs, the event-related function will execute. So I don't know if this will really impact your page load time.
What can impact your page load time is having tons and tons of event-related functions that you are trying to associate one at a time on page load.
For instance, if I have 10 lists, and each list has 10 list items, and I want any of the list items to turn green on hover-- if I have javascript that defines each of these 100 events separately, that may tax my overhead.
But!
If I move the binding of these events to AFTER the page loads and have this happen when I first mouse over the main div (or window, or on any event that will almost always occur next), then the overhead just gets passed to THAT event. The page is loaded, but now it's frozen while the events get dealt with. My user is really irked because he can't scroll down, and if the problem is bad enough, he can't close the page or switch to another window. He expected this when the page was taking forever to load, now it's just this random freeze that always happens when he goes to your page.
So if there is a page load issue, a better solution may be to find out if there is redundancies or unnecessary functions running. In the above example I gave, I could simply say "when ANY list items are moused over, they turn purple" that's one binding, versus 100. Or I may have made the easy mistake of having each of those 100 bindings actually do something (like check the value of the list item) which it really only needs to do AFTER the event that triggers it, not during page load. That would be 100 stalls that I didn't even mean to happen once during page load.
我通过使用图像而不是 div 解决了这个问题。 我发现这是解决这个问题的最佳方法。
I fixed this thing by going with images instead of divs. I found it to be the best way to resolve this.