页面加载--延迟加载

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

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

$(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});
    
});