您的位置：首页 > Web前端 > JQuery

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

2016-07-19 12:31 441 查看

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

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

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

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

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

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

2.var
scroll=$(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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery web 移动端滚动加载 HTML

相关文章推荐

新的分享

章节导航