懒加载与ajax的组合应用

作者: 书中有凉气 | 来源:发表于2017-01-02 23:36 被阅读0次

懒加载与ajax的组合应用
vue 路由的懒加载
vue 懒加载
2018-03-19项目基本选型和认识
Android 懒加载优化
vue-router懒加载速度缓慢问题
Angular 6 的预加载与懒加载
Swift语法点
懒加载的应用
Python 爬虫-异步加载

预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu29-3/renwu29-3.html
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>renwu29-3</title>
    <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<style>
    .line{
        height: 500px;
        line-height: 500px;
        border: 1px solid grey;
        border-radius: 5px;
        padding: 10px;
        margin: 5px;
    }
    .button{
        padding: 5px;
        width: 80px;
        border-radius: 5px;
        margin: 5px;
        outline-style: none;
    }
    .hover{
        background-color: #6fc;
    }
</style>
<body>
    <div class="line">1</div>
    <div class="line">2</div>
    <button class="button">click</button>
    <script>

$('body').on('mouseenter', 'div', function(){
    $(this).addClass('hover');
})
$('body').on('mouseleave', 'div', function(){
    $(this).removeClass('hover');
})
        /*
        接口
        1.url;
        2.get,post
        3.输入：
        {
            start：2，
            length：6
        }
        4.输出:
        {
            status：1 --OK
            data：[3,4,5,6,7,8]

            status：0 --ERROR
        }
        */
var getdata=(function(){
            function data(){
                $.ajax(
                    {
                        url:'renwu29-3.php',
                        dataType:'json',
                        type:'get',
                        data:{
                            start:$('.line').length,
                            len:6
                        },
                        success:function(json){
                            onSuccess(json);
                        },
                        error:function(){
                            onError();
                        },
                    }
            );
            function onSuccess(json){
                if(json.status==1){
                    append(json.data);
                }
                else{
                    alert('获取失败');
                }
            };
            function onError(){
                alert('链接失败');
            };

            function append(arr){
                for(var i=0;i<arr.length;i++){
                    $('.line:last').after('<div class="line">'+arr[i]+'</div>');
                }
            };
        }
        return {
            data:data
        }

})()


var zhangxuan=(function(){
  

  function showimg(p){
    getdata.data();
  }
  function isimg(node){
    node.each(function(){
      var $node=$(this),
          $dscrollTop=$(document).scrollTop(),
          $wwidth=$(window).height(),
          $picoffsetTop=$node.offset().top;
      //原本作为优化已加载图片不执行，但对于以DOM为参照物的方法不需要
      // if(!!$node.data('isload')){            
      //     return
      //   }
      // else{
          if(($dscrollTop+$wwidth)>$picoffsetTop){
            showimg($node);
          }

    })
  }
  function bind(node){
    var clock;
    $(window).on('scroll', function(){
      if(clock){
        clearTimeout(clock);
      }
      clock=setTimeout(function(){
            //优化滚轮停止时才执行
        isimg(node);
      }, 500)
    })

  }
  return{
    bind:bind
  }
})()
zhangxuan.bind($('.button'));




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

php

<?php
    // 后端 php 测试接口文件
    $start = $_GET['start']; //2
    $len = $_GET['len'];  //6 
    $items = array();
 
    for($i = 1; $i < $len; $i++){
        array_push($items, ($start+$i));
    }
    $ret = array('status'=>1, 'data'=>$items);

    //{status: 1, data: ['内容1','内容2','内容3']}
    sleep(0.5);
    echo json_encode($ret);
?>