Day: 2019年5月8日

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

admin web前端 暂无评论 1,294 浏览

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
…
Read more

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

admin web前端 暂无评论 2,243 浏览

先看几个网站的效果：

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

 

…

        
Read more