jquery回到顶部及懒加载基础知识问答
2016-10-06 本文已影响90人
该帐号已被查封_才怪
一、问答
1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollH=$(window).height()+$(window).scrollTop(),
selfDoc=$node.offset().top,
selfH=$node.outerHeight(true);
if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
return true
}
else return false
}
2、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on("scroll",function () {
if (isVisible($node)){
console.log("true");
}
})
3、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现.
$(window).on("scroll",function () {
$("$node").each(function () {
var $cur=$(this);
if (lode($cur.attr("isLoded"))){
return
}
if (isVisible($cur)){
lode($cur);
}
});
function lode($ele) {
$ele.attr("isLoded",true);
}
function isVisible($node){
var scrollH=$(window).height()+$(window).scrollTop(),
selfDoc=$node.offset().top,
selfH=$node.outerHeight(true);
if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
return true
}
else {
return false
}
}
})
4、图片懒加载的原理是什么？
通过判断当前元素是否出现在浏览器窗口的可视范围内（滚动的垂直距离加上窗口的垂直距离大于指定元素到文档的垂直距离），如果在则立即加载事先设定好的图片【通过属性设置的方法，将自定义的img属性值（预加载的真实url地址）把原有事先设定好的非真实img的src值给替换掉】；
二、代码
（一）、实现如下回到顶部效果
当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
line-height: 3;
}
div.ct{
position: relative;
}
div.goTop{
position: fixed;
top: 560px;
left: 1200px;
border: 1px solid red;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="ct">
<p>内容1</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<div class="goTop">回到顶部</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(window).on("scroll",function () {
if (canShow()){
$(".goTop").css("display","block");
}
else {
$(".goTop").css("display","none");
}
});
$(".goTop").on("click",function () {
$(window).scrollTop(0);
});
function canShow() {
var winH=$(window).height(),
scrollH=$(window).scrollTop();
if ( scrollH > winH ){
return true;
}
else {
return false
}
}
</script>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-1.html
（二）、实现如下图片懒加载效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载更多</title>
<style>
ul,li{
list-style: none;
}
.ct{
margin: 0 auto;
width: 800px;
}
.ct li{
margin: 10px 10px;
float: left;
width: 220px;
}
.ct li img{
width: 220px;
height: 400px ;
}
p{
float: left;
width: 50px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<ul class="ct clearfix">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<p id="hello">hello </p>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
showCheck ();
$(window).on("scroll",function () {
showCheck ();
});
function showCheck () {
$(".ct img").each(function () {
var $cur=$(this);
if ($cur.attr("isLoded")){
return
}
if (isVisible($cur)){
lode($cur);
}
});
function lode($ele) {
$ele.attr("isLoded",true);
$ele.attr("src", $ele.attr("data-src"))
}
function isVisible($node){
var scrollH=$(window).height()+$(window).scrollTop(),
selfDoc=$node.offset().top;
if (selfDoc < scrollH ) {
return true
}
else {
return false
}
}
}
</script>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-2.html
（三）、实现如下无限滚动效果
当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色。
提示：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。
效果预览
ps：自己实现效果后，可参考 demo 里的注释
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>29-3加载更多</title>
<style>
ul,li{
list-style: none;
color: #000;
margin: 0;
padding: 0;
}
li{
border: 1px solid #ddd;
line-height: 50px;
height: 50px;
margin-bottom: 10px;
cursor: pointer;
}
.hover{
background-color: green;
color: #fff;
}
a{
text-decoration: none;
color: #E27272;
display: block;
text-align: center;
height: 40px;
line-height: 40px;
width: 100px;
border: 1px solid #E27272;
border-radius: 2px;
margin: 0 auto;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<ul id="ct">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
<li>内容9</li>
<li>内容10</li>
<li>内容11</li>
</ul>
<a id="more" href="####">加载更多</a>
<script>
var cur=11;
var clock;
lodeMore();
$(window).on("scroll",function () {
if(clock) clearTimeout(clock);
clock = setTimeout(function(){
if(!isVisible($("a#more"))) return;
lodeMore();
}, 100);
});
function onSuccess(json){
cur =cur+6;
append(json.data);
}
function append(items){
for (var i=0;i<items.length;i++){
$("#ct").append("<li>"+items[i]+"</li>");
}
}
function isVisible($node){
var winH = $(window).height(), //窗口高度
offsetH = $node.offset().top, //元素到根节点顶部距离
scrollH = $(window).scrollTop(); //滚动的垂直距离
if( (offsetH > scrollH) && (offsetH < scrollH + winH ) ){
return true;
}
return false;
}
function lodeMore() {
$.ajax({
url:"renwu29_3.php",
type:"get",
dataType:"json",
data: {
start: cur,
len: 6
},
success: function(json){
onSuccess (json)
},
error: function(){
console.log('出错了')
}
})
}
$("#ct").on("mouseenter","li",function (e) {
$(this).addClass("hover");
});
$("#ct").on("mouseleave","li",function () {
$(this).removeClass("hover");
})
</script>
</body>
</html>
php代码：
<?php
$start = $_GET['start'];
$len = $_GET['len'];
$items = array();
for($i = 0; $i < $len; $i++){
array_push($items, '内容' . ($start+$i+1));
}
$ret = array('status'=>1, 'data'=>$items);
echo json_encode($ret);
?>
HTML代码预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/3/renwu29-3.html
本地测试成功：
本地测试成功
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
