resize事件

原生事件分析

window一次resize事件:

  • IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次

  • Chrome 触发1次

  • FF 触发2次
  • Opera 触发1次
  • Safari 触发1次

场景分析

  • window resize时。部分组件须要重置大小(一次)。部分组件不须要重置大小。

开源库分析

长处:使用简便

  1. $('#div1').on('resize', function (e) {
  2. console.log('[div1] resize');
  3. })
  4. $('#div1').resize(function (e) {
  5. console.log('[div1] resize2');
  6. });

缺点:内部使用轮询,性能堪忧

  1. function loopy() {
  2. // Start the polling loop, asynchronously.
  3. timeout_id = window[ str_setTimeout ](function(){
  4. // Iterate over all elements to which the 'resize' event is bound.
  5. elems.each(function(){
  6. var elem = $(this),
  7. width = elem.width(),
  8. height = elem.height(),
  9. data = $.data( this, str_data );
  10. // If element size has changed since the last time, update the element
  11. // data store and trigger the 'resize' event.
  12. if ( width !== data.w || height !== data.h ) {
  13. elem.trigger( str_resize, [ data.w = width, data.h = height ] );
  14. }
  15. });
  16. // Loop.
  17. loopy();
  18. }, jq_resize[ str_delay ] );
  19. };

长处:分Debounced和Throttled两种类型,类型明白

缺点:使用不算简易

  1. $(window).on("debouncedresize", function( event ) {
  2. // Your event handler code goes here.
  3. });
  4. // or...
  5. $(window).on("throttledresize", function( event ) {
  6. // Your event handler code goes here.
  7. });
  8. // unbind at will
  9. $(window).off( "debouncedresize" );

结论

大多数场景使用jquery-smartresize的Debounced就可以满足一次调用就可以

跨浏览器resize事件分析的更多相关文章

  1. js实现一些跨浏览器的事件方法

    用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...

  2. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  3. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  4. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  5. Javascript跨浏览器的事件对象

    一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...

  6. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

  7. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

  8. javaScript之跨浏览器的事件对象

    跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...

  9. 如何写一个跨浏览器的事件处理程序 js

    如何 写一个合格的事件处理程序,看如下代码: EventUtil可以直接拿去用 不谢 <!DOCTYPE html> <html> <head> <title ...

随机推荐

  1. 一些CSS命名规则

    一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...

  2. 10.java.lang.FileNotFoundException

    java.lang.FileNotFoundException 文件未找到异常 当程序试图打开一个不存在的文件进行读写时将会引发该异常.该异常由FileInputStream,FileOutputSt ...

  3. 供应类型与计划分类一致性检查(PO)

    应用 Oracle   Purchasing 层 Level Function 函数名 Funcgtion Name CUXPOIMM 表单名 Form Name CUXPOIMM 说明 Descri ...

  4. Syslog Cisco Incident

    http://www.cisco.com/web/about/security/intelligence/identify-incidents-via-syslog.html

  5. Android setTag IllegalArgumentException

    E/AndroidRuntime(19480): java.lang.IllegalArgumentException: The key must be an application-specific ...

  6. 雕爷牛腩这样判断零售未来-搜狐IT

    雕爷牛腩这样判断零售未来-搜狐IT 雕爷牛腩这样判断零售未来

  7. 在Mac上配置Apache+PHP环境

    1.启用Apache/Web共享 打开终端,运行启动Apache命令: sudo apachectl start 然后输入系统密码,运行成功. 关闭命令: sudo apachectl stop 重启 ...

  8. ZooKeeper源码阅读(二):客户端

    源代码: http://svn.apache.org/repos/asf/zookeeper/trunk/ 导入eclipse: 在包含build.xml目录下执行ant eclipse将产生.cla ...

  9. linux 使用sudo开放普通用户权限

    整理一下以前写的东东,刚才又忘了- ---------------------------------------------------------------------------------- ...

  10. 转载 C# 序列化与反序列化意义详解

    C# 序列化与反序列化意义详解 总结: ①序列化基本是指把一个对象保存到文件或流中,比如可以把文件序列化以保存到Xml中,或一个磁盘文件中②序列化以某种存储形式使自定义对象持久化: ③将对象从一个地方 ...