昨天听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. JS的函数

    函数由四部分组成 function+function name+parameter+body 方法调用模式 Object.add(); 函数调用模式: add(3,4) 构造器调用模式:JS是基于原型 ...

  2. 关于.NET大数据量大并发量的数据连接池管理

    转自:http://www.cnblogs.com/virusswb/archive/2010/01/08/1642055.html 我以前对.NET连接池的认识是错误的,原来以为在web.confi ...

  3. 年月日 生日 js插件

    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min ...

  4. python 使用字符串名调用类以及调用类方法名

    在python中,有时调用者仅知道类名和类方法,不负责实际的函数调用,而是将要调用的类名和类方法告诉一个中间函数,由中间函数负责实际调用函数.中间函数需以被告知的字符串调用类和类方法.         ...

  5. Git常用

    创建本地库 mkdir [dirname] cd [dirname] git init 1.创建项目目录 2.进入目录 3.git初始化 [dirname]为自己取的文件夹名字,例如mkdir myd ...

  6. 基于Chrome内核（WebKit.net）定制开发DoNet浏览器

    1.    源起 a)     定制.Net浏览器 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案, WinFrom嘛,效率虽然还不错,但是做一些特殊 ...

  7. 天气预报API(三)：免费接口测试（“旧编码”）

    说明 我以参考文章为引子,自己测试并扩展,努力寻找更多的气象API... 本文所有测试均以青岛为例. 本文所列接口城市代码(cityid)参数都使用的 "旧编码": 全国城市代码列 ...

  8. SCRUM站立会议

    SCRUM站立会议是让团队成员每日面对面站立互相交流他们所承担任务的进度.它的一个附带好处是让领导或经理能了解 到工作情况.本质上是为了团队交流,不是报告会议! 功能: 1)创造团队成员相互沟通的条件 ...

  9. bfc+css

    CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素 ...

  10. 由XML解析学习工厂模式

    代码段1: startupData = new StartupData(); /* 设定自定义的MyHandler给XMLReader */ StartupXMLHandler startupData ...