可视区域加载动画

作者: lMadman | 来源:发表于2016-11-01 17:46 被阅读0次

可视区域加载动画
js-动画加载
网页中有大量图片加载很慢，如何优化？
懒加载和预加载
懒加载和预加载
实现聊天窗口动态可视区加载的listview
简单的懒加载实现方法
使用react-window构造虚拟列表（性能优化）
图片懒加载
IntersectionObserver 监听元素是否出现或离开

有一些需求，是当我们去浏览时才会去加载，譬如一些动画，和一些图片，那么这些是怎样实现的呢？
先来看一下下面的一段小代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视区域加载</title>
</head>
<style>
    #showDiv{
        width: 500px;
        height: 350px;
        background-color: red;
        margin: 1000px auto 0 auto;
    }
    @-webkit-keyframes fadeInLeft {
        0%{
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            -moz-transform: translate3d(-100%,0,0);
            -ms-transform: translate3d(-100%,0,0);
            -o-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }
        100%{
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    }
    .fadeInLeft{
        animation-name: fadeInLeft;
        -webkit-animation-name: fadeInLeft;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
</style>
<body>
    <div id="showDiv"></div>
</body>
<script>
    function showDiv() {
        var showId = document.getElementById('showDiv');
        var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var divTop = showId.getBoundingClientRect().top;
        if(divTop<=clients){
            showId.classList.add('fadeInLeft');
        }else{
            showId.classList.remove('fadeInLeft');
        }
    }
    window.onscroll = showDiv;
</script>
</html>