昨天听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. 1282 - Leading and Trailing ---LightOj1282（快速幂 + 数学）

    http://lightoj.com/volume_showproblem.php?problem=1282 题目大意: 求n的k次方的前三位和后三位数然后输出 后三位是用快速幂做的,我刚开始还是不会 ...

  3. NetSuite API - SuiteScript API.js

    /* from: http://blog.csdn.net/levin_rain/article/details/8571444 */ ' Core SuiteScript Functions ' f ...

  4. 原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    场景: 客户端初始化正常,到IIS服务就报80040154. System.Web.Services.Protocols.SoapException: System.Web.Services.Prot ...

  5. Linux 如何安装memcache？

    原有memcache所在机器损坏,需要在新的Linux机器上安装memcache,具体步骤如下: 1.使用Linux机器的root权限登陆 2.安装libevent 下载地址:http://libev ...

  6. 使用django-admin.py 时出错

    我在安装好django后,运行django-admin.py 时出现两处错误: 一.当你在dos命令下输入django-admin.py 时不会运行,而是以记事本的方式打开了. 解决办法:找到你的dj ...

  7. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  8. awk用法总结笔记

    +  : 匹配1或多次出现的字符或正则表达式  awk '/col+/' testfile ?  : 匹配0或1次出现的字符或正则表达式    awk '/col+/' testfile |  : 匹 ...

  9. linux下配置ssledge代理服务器

    ssl edge 是一个非常好用的VPN/proxy, 比云梯 稳定快速的多.  在LINUX下开发 Titanium 需要用到各种FQ,所以它是必备工具. 1. 根据自己付费后的用户名和密码,下载 ...

  10. EDA技术与ASIC设计和FPGA开发有什么关系？FPGA在ASIC设计中有什么用途？

    利用EDA技术进行电子系统设计的最后目标是完成专用集成电路ASIC的设计和实现:FPGA和CPLD是实现这一途径的主流器件.FPGA和CPLD通常也被称为可编程专用IC,或可编程ASIC.FPGA和C ...