题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){
return ($node.offset().top<$(window).height()+$(window).scrollTop())&&\
($node.offset().top>$(window).scrollTop())
}
题目2:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(winsow).on('scroll',function(){
if(isVisible($node){
console.log(true)
}
})
题目3:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
var isFirst = true
$(window).on('scroll',function(){
if(!isFirst){
return;
}
if(isVisible($('li').eq(8))&&isFirst){
console.log(true)
isFirst = false;
}
})
题目4: 图片懒加载的原理是什么?
1.什么是懒加载?
在一些图片,文字,视频等内容较多的网站上用户,打开网站会同时加载所有网站内容,用户网速不好时会造成卡顿,体验不好。而为了提高用户体验,即对网站内容进行懒加载,即当内容出现在浏览器窗口时再去加载,这样,一次加载的内容变少,不会造成浏览器的卡顿,提高用户体验。
2.实现原理
懒加载的实现原理很简单,以图片为例,就是把img标签的src设置为空或是一张白图(所有图片都设置为同一张白图,浏览器会缓存而不会重复加载),而把图片地址放在其他地方,比如自定义属性data-src,然后,对图片进行判断,当图片出现在用户窗口时,通过jquery将data-src中图片地址赋值给src,浏览器就会发出请求,加载图片。