1.知识点部分：
懒加载图片的原理是什么？
图片懒加载也称为曝光加载，将页面上的图片分批加载，只有当图片出现在window窗口中（用户可见）的时候，才加载图片；而正常情况下，img元素是自动加载的，所以可以自定义一个图片地址属性，当需要加载图片的时候，将该自定义属性值赋给src属性，以实现优化页面的渲染速度，图片延迟加载。
懒加载图片的等式
窗口高度 + 下移窗口的距离 = 标记点到达窗口顶部的距离
jquery中this的指向（15:24~18:45）
- demo：
var GoTop = {
init: function () {
var $goTop = $('<div id="go-top">回到顶部</div>');
this.$goTop = $goTop;
//此处this指向外部GoTop对象。给对象增加一个属性名为$goTop的属性，值是$goTop(封装过的jquery对象)
this.bind();
},
bind: function () {
var self = $(this);
//把外部this保存在self变量中，闭包获取变量是获取的是self变量即外部this(GoTop对象)
$(window).on('click', function () {
//this.show();
self.show();
//on();自身是一个方法，方法即函数，on();内传入一个函数作为参数，此时传入的函数形成闭包，也叫回调函数
//由于内部function形成闭包，所以内部的this指向的是$(window)。
//此时若要this指向外部GoTop对象，则需在闭包外部对this做一次保存以便内部闭包作用域链获取
});
}
}
优化滚动停留时间的方法
$(window).on('scroll', function(){
if(clock){
clearTimeout(clock);
}
clock = setTimeout(function(){
//todo
}, 300);
});
//如果没延时停顿300毫秒就消除clock，知道停顿300毫秒时再执行延迟函数todo的内容
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>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
html,
body,
p,
{
box-sizing: border-box;
}
p {
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
.test {
text-align: center;
background: rgb(111, 238, 196);
height: 50px;
line-height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<div class="test">there</div>
<script>
$.fn.isVisible = function(){
var $self = $(this); //this指向调用他的jquery对象
$(window).on('scroll', function(){
var $me = $(this); //此处$me保存的this指向window对象
offsetTop = $self.offset().top, //记录标记元素到视窗顶端的位置
$winH = $me.height(), //获取视窗的高度
scrollTop = $me.scrollTop(), //获取窗口当前垂直滚动条的位置
scrollBottom = $me.scrollTop() + $winH; //滚动窗口后的位置
if(offsetTop > scrollTop && scrollBottom > offsetTop){
console.log(true);
} else {
console.log(false);
}
})
}
$('.test').isVisible();
</script>
</body>
</html>
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 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>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
html,
body,
p,
{
box-sizing: border-box;
}
p {
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
.test {
text-align: center;
background: rgb(111, 238, 196);
height: 50px;
line-height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<div class="test">there</div>
<script>
$.fn.isVisible = function(){
var $self = $(this);
$(window).on('scroll', function(){
var $me = $(this),
offsetTop = $self.offset().top,
$winH = $me.height(),
scrollTop = $me.scrollTop(),
scrollBottom = $me.scrollTop() + $winH;
if(!$self.data('data-visible')){
if(offsetTop > scrollTop && scrollBottom > offsetTop){
console.log(true);
$self.data('data-visible', true);
} else {
return;
}
}
});
}
$('.test').each(function(){
$(this).isVisible();
});
</script>
</body>
</html>
3.代码部分
实现如下回到顶部效果 — 当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部
<!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>回到顶部</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
html,
body,
p,
{
box-sizing: border-box;
}
p {
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
#go-top{
position: fixed;
bottom: 10px;
right: 10px;
border: 2px solid rgba(255, 0, 0, 0.548);
border-radius: 5px;
padding: 10px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<script>
//方法一：原始jquery使用方法
var $goTop = $('<div id="go-top">回到顶部</div>');
$('body').append($goTop);
$(window).on('scroll', function(){
var offsetTop = $(this).scrollTop(); //获取窗口当前垂直滚动条的位置
console.log(offsetTop);
if(offsetTop > 100){
$goTop.show();
} else {
$goTop.hide();
}
});
$goTop.on('click', function(){
$(window).scrollTop(0);
});
//方法二：把方法保存在对象中形成一个方法，调用时直接调用对象的方法
var GoTop = {
init: function(){
if($('#go-top').length > 0) return; //判断元素是否存在，避免多次调用
var $goTop = $('<div id="go-top">回到顶部</div>');
$('body').append($goTop);
this.$goTop = $goTop; //给对象GoTop增加一个属性名为$goTop的属性，值是$goTop(封装过的jquery对象)
this.bind(); //GoTop对象调用bind()方法
},
bind: function(){
var self = this; //this指向GoTop对象
$(window).on('scroll', function(){
var offsetTop = $(this).scrollTop(); //this指向window。因为on自身是方法，方法即函数，传递的参数是函数形成回调，构成闭包。此时作用域链的最外层是window，所以this指向window
if(offsetTop > 100){
self.$goTop.show();
} else {
self.$goTop.hide()
}
});
this.$goTop.on('click', function(){
$(window).scrollTop(0);
});
}
}
GoTop.init();
//方法三：用立即执行函数表达式实现封装
var GoTop = (function(){
var $goTop = $('<div id="go-top">回到顶部</div>');
$('body').append($goTop);
function init(){
$(window).on('scroll', function(){
var offsetTop = $(this).scrollTop();
console.log(offsetTop);
if(offsetTop > 100){
$goTop.show();
} else {
$goTop.hide();
}
});
$goTop.on('click', function(){
$(window).scrollTop(0);
});
}
init();
})();
</script>
</body>
</html>
图片懒加载
- 方法一
<!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>图片懒加载方法一</title>
<script src="http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
<style>
ul, li {
list-style: none;
}
.container {
width: 600px;
margin: 0 auto;
}
.container li {
float: left;
margin: 10px;
}
.container li img {
width: 240px;
height: 180px;
}
</style>
</head>
<body>
<ul class="container">
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>
</ul>
<script>
/*
1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
*/
//方法一：
//定义滚动停留延迟函数
var clock;
$(window).on('scroll', function(){
//用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 checkshow
if(clock){
clearTimeout(clock); //停留时间如果没到300毫秒，就清除clock，重新计算
}
clock = setTimeout(function(){
lazyRender(); //停留时间到达300毫秒，就执行lazyRender()函数
}, 300);
});
//lazyRender()函数：遍历img标签；如果checkShow(img)函数返回true，同时!isLoaded(img)函数返回false取反为true；就执行载入图片LoadImg(img)函数
function lazyRender(){
$('.container img').each(function(){
//闭包中this指向img
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this));
}
});
}
lazyRender();
//checkShow()函数：如果图片距离文档位置 < 窗口高度 + 滚动距离。证明图片未载入，此时返回布尔值true
function checkShow($el){
var scrollTop = $(window).scrollTop(), //取得视窗滚动距离
windowHeight = $(window).height(), //取得视窗高度
//注意此处offset().top写法！！！
offsetTop = $el.offset().top; //.offset()方法允许我们检索一个元素相对于文档-document的当前位置
if(offsetTop < scrollTop + windowHeight){
return true;
} else {
return false;
}
}
//isLoaded()函数：判断图片是否被载入过。如果data-src属性等于src属性的地址，证明被再如果，此时返回true
function isLoaded($el){
return $el.attr('data-src') == $el.attr('src');
}
//loadImg()函数：载入图片函数。将data-src的值传入src属性中
function loadImg($el){
$el.attr('src', $el.attr('data-src'));
}
</script>
</body>
</html>
- 方法二
<!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>图片懒加载方法二</title>
<script src="http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
<style>
ul, li {
list-style: none;
}
.container {
width: 600px;
margin: 0 auto;
}
.container li {
float: left;
margin: 10px;
}
.container li img {
width: 240px;
height: 180px;
}
</style>
</head>
<body>
<ul class="container">
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
<li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>
</ul>
<script>
/*
1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
*/
//方法二：
//定义滚动停留延迟函数
var clock;
$(window).on('scroll', function(){
//用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 checkshow
if(clock){
clearTimeout(clock); //停留时间如果没到300毫秒，就清除clock，重新计算
}
clock = setTimeout(function(){
checkShow(); //停留时间到达300毫秒，就执行checkShow()函数
}, 300);
});
// 用户第一次打开页面，还未滚动窗口的时候需要执行一次checkShow
checkShow();
//checkShow()函数：遍历img标签;如果img标签有isLoaded属性就直接返回，如果没有继续执行。如果isShow(img)函数返回true，就执行showImg(img)函数
function checkShow(){
$('.container img').each(function(){
//闭包中this指向img
if($(this).attr('isLoaded')){
return;
}
if(isShow($(this))){
showImg($(this));
}
});
}
function isShow($el){
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = $el.offset().top;
if(top < winH + scrollH){
return true;
} else {
return false;
}
}
function showImg($el){
$el.attr('src', $el.attr('data-src'));
$el.attr('isLoaded', true);
}
</script>
</body>
</html>
