跨浏览器resize事件分析
2016-03-05 09:14
375 查看
resize事件
原生事件分析
window一次resize事件:IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次
Chrome 触发1次
FF 触发2次
Opera 触发1次
Safari 触发1次
场景分析
window resize时。部分组件须要重置大小(一次)。部分组件不须要重置大小。开源库分析
jquery-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 ] ); };
jquery-smartresize
长处:分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就可以满足一次调用就可以相关文章推荐
- NSData与UIImage之间的相互转换
- 关系型数据库-- 设计三大范式
- EasyUi的基础学习和总结
- 配置 Log4j 日志
- Overview of Batch Management
- 随机生成10条不重复长度为10以内的字符串,进行排序
- VC++调用C#生成DLL的两种方法!
- 认识Qter
- hdu2512一卡通大冒险(集合的划分问题)
- android开发之路04(初级android工程师必会,你懂得!)
- SQL Server代码如何快速格式化
- Asmcmd 详解
- Android调用拍照和本地相册并上传给服务器
- SAP 库存关联表信息
- Android中Loader及LoaderManager的使用
- ngRoute 和 ui.router 的使用方法和区别
- GDI 字体 设备上下文 绘图
- Linux find命令实例解析
- Java 面向对象
- 向前引用(@class XX)与#直接导入头文件(import "XX.h")区别