解决Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题。

Slick 是个网页轮播组件 https://github.com/kenwheeler/slick

Animate.css是一个css3动画库https://github.com/daneden/animate.css

两者常结合使用,能达到比较好的效果。

但是 Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题,可以用以下方法解决!

html代码:

<div id="hero-slider">
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/1');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInLeftBig" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="fadeInUpBig" data-delay="1s">LEARN 

聊聊你不知道的网页无闪烁刷新效果

先看几个网站的效果:

1.CSDN首页

 

2.QQ.com

 

3.GraphQL中文网

4.phalcon中文网

 

现象研究:

仔细查看上面的4个视频,

上面演示的是用chrome浏览器打开以上网站的首页完成后,点击刷新按钮,页面呈现的刷新效果。

第1个是csdn的首页,刷新后可以看到的是整个页面都在闪。

第2个是QQ.com首页,刷新后,可以看到只有一少部分局部区域在闪。

第3个是GraphQL中文网,刷新后,可以看到也是一局部区域在闪(是一个动画效果)

第4个是phalcon中文网,刷新后,整个页完全不闪。

 

普及知识:

在现代浏览器比如:chrome,firefox等浏览器中,当一个页面完全加载完成后,会缓存到内存中,这时再去点刷新按钮或按Ctrl+R去刷新页面,页面通常来说是不会闪的。

如果发生了闪的现象,一般原因是,有些元素是动态js生成的,或在页面加载后期由css或js 改变了其位置或大小造成的。

但是当你按Ctrl+F5去强制刷新页面或清空浏览器缓存后再刷新页面,这时就会发生页面闪的现象。因为这是重新去服务器获取页面,而不是从浏览器缓存读取!

 

注:用IE浏览器刷新的话,一般总是会发生闪的现象的(未测试所有IE版本)

 

 

原创文章,转载请注明来自Lenix的博客,地址https://blog.p2hp.com/archives/6276

 

        

移动端字体自适应

完美适口:

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

为了使开发出来的应用或页面大小能适合各种高端手机使用,我们采用了h5的viewport来解决手机分辨率和屏幕大小的不同

    <meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
            

响应式网页设计–css设置网页字体大小自适应

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?

IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{font-size:62.5%; 
            

php获取apk包信息的类

最近由于公司的需求,需要为游戏的开放平台做一个上传apk的功能其中需要获取包的一些信息,于是在网上扒来了一个获取apk信息的操作类,觉得写的挺好的,所以写下来和大家分享,同时记录一下。

由于js无法打开zip包,所以无法通过js来解析apk获取其中的信息,所以我们只能先将包上传到服务器,再用php来操作他(当然java于是可以滴),话补多说,先上代码:…

    

分布式系统关注点

                

每个程序员都应该知道的延迟数

L1 缓存 引用        ......................... 0.5 ns
分支预测错误        ............................ 5 ns
L2 缓存引用         ........................... 7 ns
互斥锁定/解锁       ........................... 25 ns
主内存引用              ...................... 100 ns
一次 CPU 上下文切换(系统调用)需要大约 ..........1500 ns
用 Zippy压缩1K字节   ............. 3,000 ns  =   3 µs
发送 2K 字节通过1Gbps内网  .......