JQuery 滚动加载

来源：互联网发布：高速网络为什么不稳定编辑：程序博客网时间：2024/05/20 01:45

网上找到到一些JS滚动加载的代码.发现IE不兼容,就修改了一下.用IE,firefox,chrome测试通过.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <!--把下面路径换成你的Jquery 和bootstrap 文件路径. -->  <link href="bootstrap.min.css" rel="stylesheet">    <script src="jquery-1.8.3.js"></script>    <script src="bootstrap-3.3.5-dist\js\bootstrap.min.js"></script></head><body><div class="col-sm-4">    <ui class="list-group">        <li class="list-group-item">11</li>        <li class="list-group-item">22</li>        <li class="list-group-item">33</li>        <li class="list-group-item">44</li>        <li class="list-group-item">55</li>        <li class="list-group-item">11</li>        <li class="list-group-item">22</li>        <li class="list-group-item">33</li>        <li class="list-group-item">44</li>        <li class="list-group-item">55</li>        <li class="list-group-item">11</li>        <li class="list-group-item">22</li>        <li class="list-group-item">33</li>        <li class="list-group-item">44</li>        <li class="list-group-item">55</li>        <li class="list-group-item">11</li>        <li class="list-group-item">22</li>        <li class="list-group-item">33</li>        <li class="list-group-item">44</li>        <li class="list-group-item">55</li>        <li class="list-group-item">11</li>        <li class="list-group-item">22</li>        <li class="list-group-item">33</li>        <li class="list-group-item">44</li>        <li class="list-group-item">55</li>    </ui></div><script> $(window).scroll(function(){        var totalHeight=parseFloat($(window).height())+ parseFloat($(window).scrollTop());     //200是预设值.表示文档对象高度和窗口高度+滚动条高度对比.如果不加200,在firefox有可能运行不正确.     if($(document).height() <= totalHeight+200){         //这里可以进行ajax请求获取后台数据        $(".col-sm-4").append("<div style='height: 200px;border:1px solid;'>new data</div>");     } });</script></body></html>

0 0