前端技巧--页面懒加载，延迟加载

延迟加载有三个部分组成：

html:

将自己的网站模块化

div id="nt1" class="cake1"></div>
div id="nt2" class="cake2"></div>
div id="nt3" class="cake3"></div>
div id="nt4" class="cake4"></div>

css

设置初始隐藏和初始位置

 

.cake1,.cake2,.cake3,.cake4{
    opacity: 0;
    position: relative;
    top: 10px;
}

 

js

首先引入jquery

在写个延迟加载的js

 

<script>
    $(function() {
        $('#nt1').waypoint(function() {
            $("#nt1").animate({
                opacity: '1',
                top: '0'
            });
        }, {
            offset: 500
        }); //距离顶部500px显示
        $('#nt2').waypoint(function() {
            $("#nt2").animate({
                opacity: '1',
                top: '0'
            });
        }, {
            offset: 500
        });
        $('#nt3').waypoint(function() {
            $("#nt3").animate({
                opacity: '1',
                top: '0'
            });
        }, {
            offset: 500
        });
        $('#nt4').waypoint(function() {
            $("#nt4").animate({
                opacity: '1',
                top: '0'
            });
        }, {
            offset: 500
        });

    });
</script>