进阶任务十六-懒加载
2017-08-30 本文已影响0人
RookieD
如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($ct) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetHeight = $ct.offset().top
if(offsetHeight > scrollTop && scrollTop + windowHeight > offsetHeight) {
return true
}
return false
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
ul,li {
list-style-type: none;
}
li {
width: 100px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="target">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<script>
var clock
$(window).on("scroll", function(){
if(clock) {
clearTimeout(clock)
}
clock = setTimeout(function(){
if(isVisible($(".target"))) {
console.log("true")
}
},100)
})
function isVisible($ct) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetHeight = $ct.offset().top
if(offsetHeight > scrollTop && scrollTop + windowHeight > offsetHeight) {
return true
}
return false
}
</script>
</body>
</html>
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
ul,li {
list-style-type: none;
}
li {
width: 100px;
height: 200px;
border: 1px solid red;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="target">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<script>
var clock
var isFirst = true
$(window).on("scroll", function(event){
showFirst($(".target"))
})
function showFirst($target) {
if(clock) {
clearTimeout(clock)
}
clock = setTimeout(function(){
if(isVisible($target) && isFirst) {
console.log("true")
isFirst = false
}
},50)
}
function isVisible($ct) {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetHeight = $ct.offset().top
if(offsetHeight > scrollTop && scrollTop + windowHeight > offsetHeight) {
return true
}
return false
}
</script>
</body>
</html>
图片懒加载原理
- 首先将图片的地址存放在自定义的attribute中
- 在鼠标滚动过程中，判断相应img标签是否在可视窗口范围内，如果是的话将存放在自定义attribute中的图片地址赋值给src
- 优化：一开始就判断img标签是否在可视窗口范围内；使用
setTimeout()提高代码性能
