昨天听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. java线程小结3

    1. 多线程概述 要实现多线程可以通过继承Thread和实现Runnable接口.不过这两者之间存在一些区别.其中最重要的区别就是,如果一个类继承Thread类,则不适合于多个线程共享资源,而实现了R ...

  2. 将 ASP.NET Core 1.0 应用作为 docker 镜像发布 （Linux版）

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  3. 动画总结(UIView的动画)

    Main.storyboard ViewController.m // //  ViewController.m //  8A08.动画总结 // //  Created by huan on 16/ ...

  4. 命令行中mysql乱码问题

    1.现象  在命令行中,执行sql语句如果包含中问题,提示“ Data too long for column '列名' at row 1”   或者在命令行中查询出的结果中,中文乱码   2.分析 ...

  5. 学习django之python中os模块的函数

    os.sep可以取代操作系统特定的路径分隔符.windows下为 “\\” os.name字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'pos ...

  6. C# XMAL与WPF

    通过老师上课的解释和我下课后的网上查询,我了解到了一些关于这三者的关系.XAML是.NET体系开发程序或者网页时前台编程的一种布局方式或者说开发语言,可以比较自由的用标签的方式进行布局,借鉴了HTML ...

  7. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  8. webkit内核中的一些私有的meta标签

      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&q ...

  9. maven pox配置

    Maven教程初级篇02:pom.xml配置初步 1. 创建项目并更改项目基本配置信息 在命令行下运行如下命令创建一个项目: 1 mvn archetype:create -DgroupId=net. ...

  10. Android中实现倒计时

    1.需求 弹出提示的dialog,实现倒计时,结束后关闭dialog 2.dialog界面布局 <?xml version="1.0" encoding="utf- ...