全面学习JQuery动态滚动加载web网页内容

来源：互联网发布：linux版本介绍编辑：程序博客网时间：2024/06/01 23:05

首先请允许博主先介绍一下项目背景

很多时候，我们无论在浏览一些电商网站的APP还是浏览淘宝京东等的手机端页面的时候，都会看到当我们向下滚动页面的时候，内容是一直在加载的，而不是已经加载好的，

当然，我们抛开原生的APP不谈，今天只来说一下有关WEB前端的滚动加载事件。

首先说一下我们为什么要这么做，对于移动端，我们要做的就是性能性能还是性能，加载要快，等待时间要短，所以我们就要想方设法无所不用其极的来满足这些条件。难么页面选择性加载就成了一个最好的选择的。背景说完下面就正式的进入代码，看如何更完美的用代码来解决这些问题！

首先我们要懂得一些基本的JQuery的设置方法:

1.var winWidth=$(window).height(); //获得浏览器可视范围的高度

2.varscroll=$(window).scrollTop(); //获得滚动条到顶部的滚动距离

3.var lastImg=$('.imgCong a img').last(); //获得屏幕最后一个img或者是一块内容区域（我以几张图片为例）

4.var lastH=lastImg.offset().top+Math.floor(lastImg.height()/2); //获得最后一张照片到浏览地顶端的距离

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <meta name="format-detection" content="telephone=no, email=no" />    <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <!-- 可选的Bootstrap主题文件（一般不用引入） -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">    <link rel="stylesheet" href="css/swiper-3.3.1.min.css">    <title>向下滚动加载</title>    <style>    .imgCon a img{        width: 100%;    }    .imgCon{        margin:0;        padding: 0;    }    </style></head><body>        <div class="container-fluid" style="padding:0;">        <div class="row" style="margin:0;">            <div class="col-xs-12 imgCon">                <a href="#"><img src="images4/TB1_22BKFXXXXafXpXXSutbFXXX.jpg_960x960q60s150.jpg_.webp"/></a>            </div>            <div class="col-xs-12 imgCon">                <a href="#"><img src="images4/TB1_zEvKFXXXXbQXVXXSutbFXXX.jpg_960x960q60s150.jpg_.webp"/></a>            </div>            <div class="col-xs-12 imgCon">                <a href="#"><img src="images4/TB1EG_sKpXXXXX9aXXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp"/></a>            </div>            <div class="col-xs-12 imgCon">                <a href="#"><img src="images4/TB1EG_sKpXXXXX9aXXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp"/></a>            </div>            <div class="col-xs-12 imgCon">                <a href="#"><img src="images4/TB1EG_sKpXXXXX9aXXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp"/></a>            </div>        </div>    </div><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="js/swiper-3.3.1.jquery.min.js"></script><script>    //创建json模拟数据    var dataInt={        'data':        [{'src':'TB1GjPfKpXXXXabXpXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1j.OpKpXXXXbiXpXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1LHucKFXXXXX.XVXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TTB1Ofl4KpXXXXaUaXXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1sh4UKpXXXXbIapXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1sY2PKFXXXXXYXpXXSutbFXXX.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1V4OVKpXXXXb4XVXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1wH44KpXXXXaWaXXXXXXXXXXX-750-442.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1wPFpKVXXXXXLXpXXSutbFXXX.jpg_960x960q60s150.jpg_.webp'},        {'src':'TB1947KKFXXXXccaXXXSutbFXXX.jpg_960x960q60s150.jpg_.webp'}        ]};    //向下滚动加载以后的图片        $(window).load(function(){        $("html, body").scrollTop(0); //每次刷新都会浏览器顶部        $(document).scroll(function(){            if(checkScroll()){                console.log('ewewewe');                $.each(dataInt.data,function(index,value){                });            }        });    });    //滚动加载片方法    function checkScroll(){        var winWidth=$(window).height();  //获得屏幕的高度        var scroll=$(window).scrollTop();  //获得滚动条到顶部的滚动距离        var lastImg=$('.imgCong a img').last();  //获得最后一个img        var lastH=lastImg.offset().top+Math.floor(lastImg.height()/2);  //获得最后一张照片到浏览地顶端的距离        console.log(lastH);        return (lastH<scroll+winWidth)?true:false;  //返回真假    }</script></body></html>

1 0