屏幕宽度适应及懒加载-静水博客

屏幕宽度适应及懒加载

2018/01/21 标签：屏幕宽度适应及懒加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--指定360浏览器使用极速内核-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文档的标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <style type="text/css" media="screen">
        .layout-990{
            background: #c0cc88;
            color:#f00;
        }
        .layout-1190{
            background: #fff;
            color:#000;
        }
        .main div{
            height:200px;
        }
        .main .on{
            background: #794;
            color:#fff;
        }
    </style>
</head>
<body>
<div class="main">
      <div class="on">ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
      <div>ssss</div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript">
    //宽度响应
        var configMedia={
            '0x1216':function(res){
                document.body.className="layout-990";
            },
            '1216x':function(res){
                document.body.className="layout-1190";
            }
        }
        var responseClass = function(mediascreenArr){
            var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var inArea=false;
            var outArea='';
            for(var x in mediascreenArr){
                if(x.split('x')[0]<w&&w<=x.split('x')[1]){
                    mediascreenArr[x](x);
                    inArea=true;
                }
                if(x.split('x')[1]==''){
                    outArea=x;
                }
            }
            if(!inArea){
                mediascreenArr[outArea](outArea);
            }

        }
        var throttle = function(method,delay,duration){
                    var timer=null, begin=new Date();
                    return function(){
                        var context=this, args=arguments, current=new Date();;
                        clearTimeout(timer);
                        if(current-begin>=duration){
                             method.apply(context,args);
                             begin=current;
                        }else{
                            timer=setTimeout(function(){
                                method.apply(context,args);
                            },delay);
                        }
                    }
        }
        var resizeFun=throttle(function(){responseClass(configMedia)},200,100);
        $(window).on('resize',resizeFun);
        //宽度响应结束

        //滚动懒加载
        $.fn.visualization=function(enter,leave){
            //enter进入可视窗口时执行
            //leave离开可视窗口时执行
            var _self=this,timmer=null;
            var visualizationFun=function(){
                var wScrollTop=$(window).scrollTop()
                var wHeight=$(window).height();
                    $(_self).each(function(){
                    if(($(this).offset().top<wScrollTop+wHeight)&&($(this).offset().top+$(this).height()>wScrollTop)){
                        if(typeof($(this).attr('data-visualization'))=='undefined'||($(this).attr('data-visualization')=='false')){
                            $(this).attr('data-visualization','true');
                            enter.call(this);
                        }
                    }
                });

            }
            var visualizationFunLeave=function(){
                var wScrollTop=$(window).scrollTop()
                var wHeight=$(window).height();
                    $(_self).each(function(){
                        if((typeof($(this).attr('data-visualization'))!='undefined')&&($(this).attr('data-visualization')=='true')){
                            if(!(($(this).offset().top<wScrollTop+wHeight)&&($(this).offset().top+$(this).height()>wScrollTop))){
                                $(this).attr('data-visualization','false');
                                leave.call(this);
                            }
                        }
                });
            }
            visualizationFun();
            $(window).on('scroll.visualization',function(){
                visualizationFunLeave();
                clearTimeout(timmer);
                timmer=setTimeout(function(){
                    visualizationFun()
                },200);
            });
        }
        $('.main div').visualization(function(){
            //进入可视区域执行
            $(this).addClass('on')
        },function(){
            //离开可视区域执行
            $(this).removeClass('on')
        });

    </script>
</body>
</html>

//移动端flex布局
var throttle = function (method, delay, duration) {
    var timer = null, begin = new Date();
    return function () {
        var context = this, args = arguments, current = new Date();;
        clearTimeout(timer);
        if (current - begin >= duration) {
            method.apply(context, args);
            begin = current;
        } else {
            timer = setTimeout(function () {
                method.apply(context, args);
            }, delay);
        }
    }
}

$.fn.visualization = function (enter, leave) {
    var _self = this, timmer = null;
    var visualizationFun = function () {
        var wHeight = $(window).height();
        $(_self).each(function () {
            if (($(this).offset().top < wHeight) && ($(this).offset().top - $(".header").height() > 0)) {
                if (typeof ($(this).attr('data-visualization')) == 'undefined' || ($(this).attr('data-visualization') == 'false')) {
                    $(this).attr('data-visualization', 'true');
                    enter.call(this);
                }
            }
        });
    }
    var visualizationFunLeave = function () {
        var wHeight = $(window).height();
        $(_self).each(function () {
            if ((typeof ($(this).attr('data-visualization')) != 'undefined') && ($(this).attr('data-visualization') == 'true')) {
                if (!($(this).offset().top < wHeight) && ($(this).offset().top - $(".header").height() > 0)) {
                    $(this).attr('data-visualization', 'false');
                    leave.call(this);
                }
            }
        });
    }
    visualizationFun();
    var resizeFun = throttle(function () {
        visualizationFunLeave();
        visualizationFun()
    }, 400, 80);
    var mainScrollTop = $(".main").scrollTop();
    $(".main").on('scroll.visualization', function () {
        if($(".main").scrollTop() > mainScrollTop){
            resizeFun();
        }
        mainScrollTop = $(".main").scrollTop();
    });
}

上一篇: AI导出svg去除边缘空白

下一篇: 微信小程序wx.request封装

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章