1. 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),//浏览器窗口可视区域的高度
scrollTop = $(window).scrollTop(),//窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
offsetTop = $node.offset().top,//元素的绝对偏移量,指元素的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变
nodeHeight = $node.outerHeight();//元素的实际尺寸,即 height+padding+border,
// $('#dom').outerHeight(true)#dom的实际尺寸及外边距,即 height+padding+border+margin
if(windowHeigth+scrollTop>offsetTop && scrollTop<offsetTop+nodeHeight){
return true;
}else{
return false;
}
//scrollTop< offsetTop+nodeHeight浏览器上边缘
//windowHeight+scrollTop>offsetTop浏览器下边缘
}
2.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>懒加载2</title>
<style>
body{
font: 20px/1.5 ;
background: #FF9279;
padding: 30px;
height: 2500px;
}
.p1{
position: absolute;
top: 1500px;
left: 40%;
padding: 50px;
border: 2px solid #FF0500;
background: #0096CC;
}
</style>
</head>
<body>
<p class="p1">hello</P>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(window).on('scroll',function(){
if(isShow($('.p1'))){
console.log(true)
}else{
console.log(false)
}
})
function isShow($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight();
if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
return true
}else{
return false;
}
}
</script>
</body>
</html>
3. 当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
<p class="p1">hello</P>
<script src="jquery-3.2.0.min.js"></script>
<script>
var lock = false//设置一个锁
$(window).on('scroll',function(){
if(!lock){//在滚动时不会在执行下面函数
isShow($('.p1'))
}
})
function isShow($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight();
if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
console.log(true)
lock = true;//当第一出现在可是区时把锁设置true
return true
}else{
return false;
}
}
<body>
<p class="p1">hello</P>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(window).on('scroll',function(){
isCheck($('.p1'))
})
function isShow($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight();
if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
return true
}else{
return false;
}
}
function isCheck($node){
if($node.not('.load').length===1&& isShow($node)){
console.log(true)
$node.addClass('load')
}else{
return;
}
}
</script>
</body>
4. 图片为什么懒加载,懒加载的原理是什么?
为什么懒加载:如果页面的图片过多,打开时页面时会同时发很多请求去加载图片,会阻塞页面的加载速度。
原理:把图片的src放在自定义的属性上data-src,当滚动页面时把可视区的图片自定义属性值换成src属性值。
5.实现图片的懒加载
<script>
check(); //打开网页把在可视区的img展示出来
$(window).on('scroll', check)
function check(){
$('.container img').not('.load').each(function(){//遍历没有.load的img
if(isShow($(this))){//如果在可视区
show($(this))//执行函数
}
})
}
function show($imgs){
$imgs.each(function(){//遍历所有imgs
var imgUrl = $(this).attr('data-src');//获取自定义属性
$(this).attr('src',imgUrl);//改变自定义的属性值
$(this).addClass('load')
})
}
function isShow($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight+scrollTop>offsetTop && scrollTop< offsetTop+nodeHeight){//可视区域
return true;
}else{
return false;
}
}
</script>
6.懒加载新闻
<style>
html,body,h2,p,ul,li{
margin:0px;
padding:0px;
list-style: none;
}
a{
color:#333;
text-decoration:none;
}
.container{
width:600px;
margin:0 auto;
}
.item{
margin-top:20px;
}
.item:after{
content:'';
display: block;
clear:both;
}
.item .thumb img{
width:100px;
height:100px;
}
.item .thumb{
float:left;
}
.item h2{
margin-left:120px;
font-size:14px;
}
.item p{
margin-left:120px;
font-size:14px;
margin-top:60px;
color:#ccc;
}
.load-more{
visibility: hidden;
margin: 3px;
height: 3px;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<!--<li>
<a>
<div>
<img src="" alt="">
</div>
<h2></h2>
<p></p>
</a>
</li>
-->
</ul>
<p class="load-more">没有更多了</p>
</div>
<script src="jquery-3.2.0.min.js"></script>
<script>
var pageIndex =0;//每次后端给一页数据 一页数据加载2个新闻
var isOver = false;// 数据全部被加载完以后为true;
var isNewsArrive = true ; //滚动时数据是否到了 给个锁
getNews();
$(window).on('scroll',checkNews);
function checkNews(){
if(isShow($('.load-more')) && !isOver && isNewsArrive){
getNews();
}
}
function getNews(){
isNewsArrive = false;
$.get('/getNews',{page:pageIndex}).done(function(ret){
isNewsArrive = true //数据到了
if(ret.status === 0){//与后端约定status===0时数据发送成功
pageIndex++;
appendHtml(ret.data)//ret.data获取后端retNews
checkNews();//如果.load-more出现在可视区继续获取
}else{
alert('获取新闻出错')
}
}).fail(function(){
alert('系统异常')
})
}
function appendHtml(news){
if(news.length === 0){
isOver = true;
$('.container').append('<p>没有更多了</p>')
return ;//数据全部加载完后
}
var html ='';//接受到数据后拼接html
$.each(news,function(){
html +='<li class="item">';
html +=' <a href="'+this.link+'">';
html += '<div class="thumb"> ![]('+ this.img +')</div>';
html +='<h2>'+this.title+'</h2>';
html +=' <p>'+this.brif+'</P>';
html +='</a></li>';
})
$('.news').append(html);
}
function isShow($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if(windowHeight+scrollTop>offsetTop && scrollTop< offsetTop+nodeHeight){
return true
}else{
return false
}
}
</script>
//后端
app.get('/getNews',function(req,res){
var news = [
{
link:'http://mil.qq.com/mil_index.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
title:'韩媒:韩国旅行社停止销售中国旅游产品 销量锐减',
brif:'萨德对韩国人民生活的影响-1'
},
{
link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
title:'陆克文:特朗普时期,台湾问题不再是中美台面上问题',
brif:'萨德对韩国人民生活的影响-2'
},
{
link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
title:'乐天免税店销售额锐减25% 韩国免税店开拓东南亚市场',
brif:'萨德对韩国人民生活的影响-3'
},
{
link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
title:'朝中社:美国“反恐战”是前所未闻的国家恐怖行为',
brif:'萨德对韩国人民生活的影响-4'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
title:'美前防长:对朝鲜动武风险太大,还是谈判吧',
brif:'萨德对韩国人民生活的影响-5'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头?',
brif:'萨德对韩国人民生活的影响-6'
},
{
link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
title:'媒体:留给和平解决朝核问题的时间或许所剩无多',
brif:'萨德对韩国人民生活的影响-7'
},
{
link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
title:'德女防长回怼特朗普欠军费言论:我们不欠北约的钱',
brif:'萨德对韩国人民生活的影响-8'
},
{
link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
title:'俄媒:学生超越老师 中国造舰已遥遥领先俄罗斯',
brif:'萨德对韩国人民生活的影响-9'
},
{
link:'http://mil.qq.com/mil_index.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
title:'韩媒:韩国旅行社停止销售中国旅游产品 销量锐减',
brif:'萨德对韩国人民生活的影响-1'
},
{
link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
title:'陆克文:特朗普时期,台湾问题不再是中美台面上问题',
brif:'萨德对韩国人民生活的影响-2'
},
{
link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
title:'乐天免税店销售额锐减25% 韩国免税店开拓东南亚市场',
brif:'萨德对韩国人民生活的影响-3'
},
{
link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
title:'朝中社:美国“反恐战”是前所未闻的国家恐怖行为',
brif:'萨德对韩国人民生活的影响-4'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
title:'美前防长:对朝鲜动武风险太大,还是谈判吧',
brif:'萨德对韩国人民生活的影响-5'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头?',
brif:'萨德对韩国人民生活的影响-6'
},
{
link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
title:'媒体:留给和平解决朝核问题的时间或许所剩无多',
brif:'萨德对韩国人民生活的影响-7'
},
{
link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
title:'德女防长回怼特朗普欠军费言论:我们不欠北约的钱',
brif:'萨德对韩国人民生活的影响-8'
},
{
link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
title:'俄媒:学生超越老师 中国造舰已遥遥领先俄罗斯',
brif:'萨德对韩国人民生活的影响-9'
},
{
link:'http://mil.qq.com/mil_index.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
title:'韩媒:韩国旅行社停止销售中国旅游产品 销量锐减',
brif:'萨德对韩国人民生活的影响-1'
},
{
link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
title:'陆克文:特朗普时期,台湾问题不再是中美台面上问题',
brif:'萨德对韩国人民生活的影响-2'
},
{
link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
title:'乐天免税店销售额锐减25% 韩国免税店开拓东南亚市场',
brif:'萨德对韩国人民生活的影响-3'
},
{
link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
title:'朝中社:美国“反恐战”是前所未闻的国家恐怖行为',
brif:'萨德对韩国人民生活的影响-4'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
title:'美前防长:对朝鲜动武风险太大,还是谈判吧',
brif:'萨德对韩国人民生活的影响-5'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头?',
brif:'萨德对韩国人民生活的影响-6'
},
{
link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
title:'媒体:留给和平解决朝核问题的时间或许所剩无多',
brif:'萨德对韩国人民生活的影响-7'
},
{
link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
title:'德女防长回怼特朗普欠军费言论:我们不欠北约的钱',
brif:'萨德对韩国人民生活的影响-8'
},
{
link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
title:'俄媒:学生超越老师 中国造舰已遥遥领先俄罗斯',
brif:'萨德对韩国人民生活的影响-9'
},
{
link:'http://mil.qq.com/mil_index.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
title:'韩媒:韩国旅行社停止销售中国旅游产品 销量锐减',
brif:'萨德对韩国人民生活的影响-1'
},
{
link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
title:'陆克文:特朗普时期,台湾问题不再是中美台面上问题',
brif:'萨德对韩国人民生活的影响-2'
},
{
link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
title:'乐天免税店销售额锐减25% 韩国免税店开拓东南亚市场',
brif:'萨德对韩国人民生活的影响-3'
},
{
link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
title:'朝中社:美国“反恐战”是前所未闻的国家恐怖行为',
brif:'萨德对韩国人民生活的影响-4'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
title:'美前防长:对朝鲜动武风险太大,还是谈判吧',
brif:'萨德对韩国人民生活的影响-5'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头?',
brif:'萨德对韩国人民生活的影响-6'
},
{
link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
title:'媒体:留给和平解决朝核问题的时间或许所剩无多',
brif:'萨德对韩国人民生活的影响-7'
},
{
link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
title:'德女防长回怼特朗普欠军费言论:我们不欠北约的钱',
brif:'萨德对韩国人民生活的影响-8'
},
{
link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
title:'俄媒:学生超越老师 中国造舰已遥遥领先俄罗斯',
brif:'萨德对韩国人民生活的影响-9'
},
]
var pageIndex = req.query.page;
var len = 2;
var retNews = news.slice(pageIndex*len,pageIndex*len+len)//获取数据第一次0 2 /第二次 2 4 /....
res.send({
status:0,
data:retNews
})
})
版权归饥人谷 楠柒 所有 如有转载请附上地址