题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),
scollTop = $(window).scollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if( windowHeight + scollTop > offsetTop && offsetTop < scollTop + nodeHeight ) {
return true;
} else {
return false;
}
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
代码实例
$box = $('.box');
$(window).on('scroll', function() {
if(isVisible($box)) {
console.log(true);
} else {
console.log(false);
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if( windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ) {
return true;
} else {
return false;
}
}
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
代码实例
$box = $('.box');
$(window).on('scroll', function() {
if(isVisible($box)) {
console.log(true);
} else {
console.log(false);
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if( windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ) {
return true;
} else {
return false;
}
}
题目4： 图片懒加载的原理是什么？
- img 标签只要 src 属性上有图片的地址，图片就会立即加载。
- 所以图片懒加载的原理就是先把图片地址放在自定义属性 data-src 上，然后通过检测图片是否在窗口可视范围内，如果是则把 data-src 上的地址赋值给 src，加载图片。
题目5： 实现视频中的图片懒加载效果
实例效果
Github代码
主要还是看代码把，把在github上预览效果好像图片特别容易加载失败...
然后原因应该是图片归属网站防外链的问题，解决方法是代码加上了<meta name="referrer" content="no-referrer">,图片就能正常加载
image.png
