昨天听w3ctech分享时候，说道orientationchange在不同OS和版本中，存在兼容问题，很多时候触发时候都没有渲染结束，开发同学一般都是基于setTimeout一段时间之后，在去执行具体的注册事件

类似这样的系统兼容问题还有很多，其核心原因在于

1. 渲染未结束，js事件提前出发或者延后触发

2. 无法根本之道何时渲染完毕，只能用setTimeout估摸具体时间

所以这里本质上还是js对于渲染模型的观察者模式public的api不够详细造成，所以我们就想到一个旁敲侧击的方式，

1. 通过media query之类的Observe来做实时观察

2. 再结合reflow/repaint会触发resize事件的特质做到及时响应

实现代码如下：

jsfile（testOrientation.js）

require([ 'common' ], function($) {
    $('#J_block').bind('resize', function() {
        alert($(this).css('background-color'))
    })
    window.addEventListener("orientationchange", function() {
        var color = $('#J_block').css('background-color');
        $('<div>' + color + '</div>').appendTo(document.body);
    }, false);
})

htmlfile

<!doctype html>
<html>
<head>
 <!--# include virtual="/t/common/index/header.html" -->
<style>
@media screen and (orientation:landscape){
    #J_block{
        background-color:green;
    }
}
@media screen and (orientation:portrait){
    #J_block{
        background-color:red;
    }
}
</style>
</head>
<body>
    <div style="margin-top:10px;text-align:center" id="J_block">kqwjelqjwelkqwjelk</div>
    <script src="<!--# include virtual="/t/common/loadRequireUrl.variable" -->?<!--# include virtual="/t/common/gb_version.variable" -->"></script>
    <script>
        require([ '<!--# include virtual="/t/common/loadConfigUrl.variable" -->?<!--# include virtual="/t/common/gb_version.variable" -->' ], function() {
            require([ 'test/testOrientation' ]);
        });
    </script>
</body>
</html>

依照这个思路，还可以举一反三，如

1. 基于Css实现的text-ellipsis属性+resize事件，可以算不同屏幕下是否超过字符上限

2. 基于Css实现dataURI实现base64 HTML code实现JS字符编码转换，见我之前的一篇文章http://www.cnblogs.com/xueduanyang/archive/2013/05/30/3108442.html

3. 基于Css的media query实现各种机型探测

4. 基于Css的rem属性实现放大镜同步

5. 基于Css的webkit-calc，实现宽度自适应

等等等等

欢迎和大家一起讨论

基于Css反射形自触发事件，优化你的延时事件的更多相关文章

  1. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  2. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  3. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  4. Tair LDB基于Prefixkey中期范围内查找性能优化项目总结

    "Tair LDB基于Prefixkey该范围内查找性能优化"该项目是仅一个月.这个月主要是熟悉项目..以下从几个方面总结下个人在该项目上所做的工作及自己的个人所得所感. 项目工作 ...

  5. 基于SSD固态硬盘的数据库性能优化

    基于SSD固态硬盘的数据库性能优化 2010-11-08 00:0051cto佚名   关键字:固态硬盘 数据库管理 SSD 企业软件热点文章 Java内存结构与模型结构分析 Oracle触发器的语法 ...

  6. 移动端触摸、点击事件优化（fastclick源码学习）

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

  7. 基于ASP.NET Core 5.0使用RabbitMQ消息队列实现事件总线(EventBus)

    文章阅读请前先参考看一下 https://www.cnblogs.com/hudean/p/13858285.html 安装RabbitMQ消息队列软件与了解C#中如何使用RabbitMQ 和 htt ...

  8. Vue3 Transition 过渡效果之基于 CSS 过渡

    介绍 Transistion 路由组件的切换.动态组件的切换.v-if 条件渲染组件以及 v-show 显示组件原本是没有任何过渡(CSS 动画)效果的.然而,Vue 的内置组件<Transit ...

  9. tab事件优化-事件代理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. prism4 StockTrader RI 项目分析一些体会2

    prism 对于逻辑复杂的页面,通过建立 controller实现逻辑管理 按着一般的做法就是,各模块的viewmodel import由各模块去实例化(理解有限),但是通过controller实现了 ...

  2. QQ浏览器安卓5.8版本的Uint8Array API有bug

    调用new Uint8Array()时QQ浏览器将直接返回参数列表, 比如new Uint8Array(a)将返回[a],比如new Uint8Array(a, b)将返回[a, b],比如new U ...

  3. GridView基础知识

    首先,gridview是封装好的,直接在设计界面使用,基本不需要写代码: 1.绑定数据源 GridView最好与LinQDatasourse配合使用,相匹配绑定数据: 2.外观控制 整体控制 自动选择 ...

  4. spring-aop学习

     SpringAOP学习 author:luojie 1.  AOP中的基本概念 AOP的通用术语,并非spring java所特有.很遗憾AOP的术语不是特别的直观.但如果让Spring java来 ...

  5. linux进程间通信-共享内存

    转载:http://www.cnblogs.com/fangshenghui/p/4039720.html 一 共享内存介绍 共享内存可以从字面上去理解,就把一片逻辑内存共享出来,让不同的进程去访问它 ...

  6. AKI

    KDIGO 2012定义:尿量<0.5ml/kg/h 6h+:scr上升50%+ 7d-:scr上升26.5 2d- 但面对录入窗口,又想不出说什么了,继续看aki?刚才想的是什么呢?入冬,好像 ...

  7. Unity中使用多构造函数（转）

    如果要实例化的类只有一个构造函数, 则使用方法很简单使用方法如下: 1 2 3 4 5 6 7 using (IUnityContainer container = new UnityContaine ...

  8. [Leetcode][JAVA] Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6   ...

  9. d3 API axis

    场景 1.画网格线 使用方法.innerTickSize(): 指定内刻度大小 或者 .tickSize(inner, outer): 2.内外刻度线 innerTickSize outerTickS ...

  10. js继承理解（有引用）

    具体栗子:http://www.cnblogs.com/ayqy/p/4471638.html(地下为自己理解总结,可能晦涩,链接详细) 1.父类实例赋予子类原型. 2.利用子类函数引用 父类.cal ...