题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
原生JS
<script>
var node = document.getElementsByClassName('box')[16];
function isVisible(node) {
//窗口可视大小
var window_height = document.documentElement.clientHeight;
//元素至文档顶部的距离
var offsetTop = node.offsetTop;
//文档滚动的距离
var scrollTop = document.documentElement.scrollTop;
//元素高度
var eleHeight = parseInt(getComputedStyle(node).height);
if (offsetTop < scrollTop + window_height && scrollTop < eleHeight + offsetTop) {
console.log('元素在可视区');
return true
} else {
console.log('元素不在可视区');
return false
}
}
isVisible(node);
</script>
JQ
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
function isVisible(node) {
//窗口高度
var window_height = $(window).height();
//文档滚动高度
var srollTop = $(window).scrollTop();
//元素到文档顶部的距离
var offsetTop = $(node).offset().top;
//元素自身高度
var height = $(node).height();
if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
console.log('元素在窗口中');
} else {
console.log('元素不在窗口中');
}
}
isVisible(node);
</script>
2，当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var node = '#box18';
$(window).on('scroll', function(event) {
event.preventDefault();
if (isVisible(node)) {
//给node添加一个属性来作为判断的条件
console.log(true);
}
}
});
function isVisible(node) {
//窗口高度
var window_height = $(window).height();
//文档滚动高度
var srollTop = $(window).scrollTop();
//元素到文档顶部的距离
var offsetTop = $(node).offset().top;
//元素自身高度
var height = $(node).height();
if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
// console.log('元素在窗口中');
return true
} else {
// console.log('元素不在窗口中');
return false
}
}
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var node = '#box18';
$(window).on('scroll', function(event) {
event.preventDefault();
if (isVisible(node)) {
//给node添加一个属性来作为判断的条件
if (isLoaded(node)) {
console.log(true);
$(node).data('loaded', true);
return
}
}
});
function isVisible(node) {
//窗口高度
var window_height = $(window).height();
//文档滚动高度
var srollTop = $(window).scrollTop();
//元素到文档顶部的距离
var offsetTop = $(node).offset().top;
//元素自身高度
var height = $(node).height();
if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
// console.log('元素在窗口中');
return true
} else {
// console.log('元素不在窗口中');
return false
}
}
//已经加载过就添加一个自定义属性
function isLoaded(node) {
if ($(node).data('loaded')) {
return false;
} else {
$(node).data('loaded', true);
return true;
}
}
</script>
题目4： 图片懒加载的原理是什么？
图片还没进入可视范围内之前，img标签的src属性为空，进入可视范围之后再把src属性修改为实际的图片地址，可以避免网页同时加载大量图片出现卡顿情况。
题目5
<script type="text/javascript">
var clock
//一上来就调用加载可视区图片
lazyRender();
$(window).on('scroll', function(event) {
//设置定时器优化防止过多的滚动事件调用lazyRender事件
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function function_name() {
lazyRender();
},100)
});
function lazyRender() {
$('.container img').each(function(index, el) {
var $node = $(this);
if (isVisible($node) && !isLoaded($node)) {
imgLoad($node);
}
});
}
function isVisible($node) {
//窗口高度
var window_height = $(window).height();
//文档滚动高度
var srollTop = $(window).scrollTop();
//元素到文档顶部的距离
var offsetTop = $node.offset().top;
//元素自身高度
var height = $node.height();
if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
// console.log('元素在窗口中');
return true
} else {
// console.log('元素不在窗口中');
return false
}
}
//已经加载过就添加一个自定义属性
function isLoaded($node) {
if ($node.data('loaded')) {
return true;
} else {
$node.data('loaded', true);
return false;
}
}
//加载图片
function imgLoad($node) {
$node.attr('src', $node.attr('data-src'));
}
</script>
