跨浏览器resize事件分析

标签: 浏览器 resize 事件 | 发表时间:2014-08-18 22:21 | 作者:spy19881201
出处:http://blog.csdn.net

resize事件

原生事件分析

window一次resize事件:

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

  • Chrome 触发1次

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

场景分析

  • window resize时,部分组件需要重置大小(一次);部分组件不需要重置大小;

开源库分析

优点:使用简便

     $('#div1').on('resize', function (e) {
    console.log('[div1] resize');
  })
  $('#div1').resize(function (e) {
    console.log('[div1] resize2');
  });

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

   function loopy() {
    // Start the polling loop, asynchronously.
    timeout_id = window[ str_setTimeout ](function(){
      // Iterate over all elements to which the 'resize' event is bound.
      elems.each(function(){
        var elem = $(this),
          width = elem.width(),
          height = elem.height(),
          data = $.data( this, str_data );

        // If element size has changed since the last time, update the element
        // data store and trigger the 'resize' event.
        if ( width !== data.w || height !== data.h ) {
          elem.trigger( str_resize, [ data.w = width, data.h = height ] );
        }
      });
      // Loop.
      loopy();
    }, jq_resize[ str_delay ] );
};

优点:分Debounced和Throttled两种类型,类型明确

缺点:使用不算简易

   $(window).on("debouncedresize", function( event ) {
    // Your event handler code goes here.
});

// or...
$(window).on("throttledresize", function( event ) {
    // Your event handler code goes here.
});

// unbind at will
$(window).off( "debouncedresize" );

结论

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

作者:spy19881201 发表于2014-8-18 22:21:12 原文链接
阅读:0 评论:0 查看评论

相关 [浏览器 resize 事件] 推荐:

跨浏览器resize事件分析

- - CSDN博客Web前端推荐文章
window一次resize事件:. IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次. window resize时,部分组件需要重置大小(一次);部分组件不需要重置大小;. 优点:分Debounced和Throttled两种类型,类型明确. 大多数场景使用jquery-smartresize的Debounced即可满足一次调用即可.

mousemove,scroll,resize性能优化

- - CSDN博客推荐文章
mousemove,scroll,resize 每秒触发N次. 性能优化一下很有必要 . body{height:2000px; font:700 16px/32px '微软雅黑'; color:#fff}. before.innerHTML = '优化后:' + e.type + ':' + i ;.

浏览器事件的思考

- - 博客 - 伯乐在线
doSomeThing();//这个方法貌似很有名. 上面的代码看起来像是很好的完成了我们交给它的工作, 浏览器不会再将我们重定向到href中的链接,但这么做到底有什么不对呢. 在解释有什么不对前,我们来看看浏览器中事件中的几个概念. 当我们点击某一个链接的时候,浏览器会直接跳转,在表单中按回车,表单会自动提交,这些都是浏览器的默认行为.

浏览器中关于事件的那点事儿

- - 博客园_知识库
  在前端中,有一个很重要的概念就是事件. 我对于事件的理解就是使用者对浏览器进行的一个动作,或者说一个操作.   本文会介绍很多与事件有关的东西,虽然我的出发点有那么点一网打尽的意思m不过也难以盖全,所以就把最常用,最基本也相对重要的内容拿出来记录一下.   Javascript绑定事件的方式.   因为各种历史原因,事件的绑定在不同的浏览器总是有不同的写法,当然现在可能大多数人都已经习惯于jQuery的事件绑定,而不清楚javascript的原生事件绑定是什么样子.

JavaScript单线程和浏览器事件循环简述

- - 破狼 Blog
JavaScript单线程. 在上篇博客 《Promise的前世今生和妙用技巧》的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型. 应很多网友的回复,在这篇文章中将继续展开这一个话题. 当然这里是博主的一些理解,如果还存在什么纰漏的话,请不吝指教. JavaScript这门语言运行在浏览器中,是以单线程的方式运行的.

兼容所有浏览器的 DOM 载入事件

- - Harttle Land
本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器. 接着介绍jQuery对该问题的实现源码,以及jQuery中 $(document).ready()和 $(window).load()方法的区别.

javaScript跨浏览器事件处理程序

- - SegmentFault 最新的文章
最近在阅读 javascript高级程序设计,事件这一块还是有很多东西要学的,就把一些思考和总结记录下. 在事件处理,事件对象,阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中最好编写成一个通用的事件处理工具. //在这里添加一些通用的事件处理方法. 事件的绑定主要为IE8以下浏览器做兼容处理:.

兼容各个浏览器版本的事件监听器工具

- - CSDN博客推荐文章
作者:kingwolf_JavaScript 发表于2012-5-15 19:12:15 原文链接. 阅读:6 评论:0 查看评论.

[译]跨浏览器的多点触控与鼠标事件处理

- Stanley - UED TEAM,用户体验设计,web前端开发
原作者Ted Johnson, Graphics Program Manager Lead, Internet Explorer. 译者sunnylqm,转发请注明. 本文主要解释了Web开发者如何通过使用IE10中新引入的pointer事件模型、iOS上的touch事件模型以及W3C标准的扩展鼠标事件模型来编写普适的跨浏览器的触控事件处理代码.

各种浏览器全屏模式的方法、属性和事件介绍

- - Web前端 - ITeye博客
requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:. // 判断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) {. element.msRequestFullscreen(); } } // 启动全屏.