问答
1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数isVisible实现
function isVisible($node){ }
//
<script type="text/javascript">
function isVisible($node) {
var $scrollTop = $(window).scrollTop(),
$winH = $(window).height(),
$nodeTop = $node.offset().top;
if ($nodeTop < ($scrollTop + $winH)) {
console.log('true')
} else {
console.log('false')
}
}
</script>
2、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
var $node = $('.bb');
function isVisible($node) {
$(window).on('scroll', function () {
var top = $node.offset().top;
var winH = $(window).height();
var scrollH = $(window).scrollTop();
if (top < winH + scrollH) {
console.log(true)
} else {
console.log(false)
}
})
}
isVisible($node);
</script>
3、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
var $node = $('.bb');
function isVisible($node) {
$(window).on('scroll', function () {
var $top = $node.offset().top,
$winH = $(window).height(),
$scrollH = $(window).scrollTop();
if ($top < $winH + $scrollH) {
if($node.attr('isLoaded')){return}
console.log(true)
$node.attr('isLoaded', true);
} else {
console.log(false)
}
})
}
isVisible($node);
</script>
4、图片懒加载的原理是什么？
首先设置所有图片的背景图为空白的（这是为了避免一些浏览器可能对没有图片的地方显示“X”造成视觉上的不完美），空白图片的URL保持一致（浏览器就不会重复加载消耗资源），当图片出现在窗口视线中的时候，执行图片链接地址的替换（如何判断图片出现在视线中呢：目标元素的offset().top 小于 $(window).height() + $(window).scrollTop() ）。
翻到显示18的时候出现“回到顶部”按钮，因为setTimeout所以会延迟500毫秒出现
JQ的懒加载
本地apach测试通过
待续......
网友评论