1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
代码实现: http://js.jirengu.com/kakaribaju/1/edit?html,css,console,output
2.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
代码实现:同上
3.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现。
思路:考虑给 题目中2 的代码加一个锁 。
var isvisible=function(jquery){
if(jquery.offset().top > $(window).scrollTop() && jquery.offset().top < $(window).scrollTop() + $(window).height()){
return true
}
return false
}
var clock=true
var isfirst=function(jquery){
if(isvisible(jquery)&&clock){
clock=false
console.log(true)
}
}
$(window).on('scroll',function(){
isfirst($('.lala'))
})
但是这样做有一个很大的坏处,这个锁,是一次性的。只要这个锁被引用,它就不能再次使用了。
就是说,对一个变量来判断是不是第一访问这个函数,依靠函数自己很难做出判断,因为,他自己不知道自己会在什么时候被引用,会引用多少次,会被谁引用。
所以就可以考虑在传入的变量身上做手脚,我们可以给传进来的变量做个标记,然后下次再查看有没有绑定的东西就可以了。这样就轻松的知道,这个变量是不是第一次传递进来了。所以,可以考虑给传递进来的参数加一个特殊的class?还可以像视频当中,改变变量的一些自身的属性。
var isvisible=function(jquery){
if(jquery.offset().top > $(window).scrollTop() && jquery.offset().top < $(window).scrollTop() + $(window).height()){
return true
}
return false
}
function isfirst(jquery){
if(jquery.attr('firstname')==='haha'){
return false;
}
jquery.attr('firsrtname','haha')
return true;
}
$(window).on('scroll',function(){
if(isvisible($('.lala'))&&isfirst($('.lala'))){
console.log(true)
}
})
4. 图片懒加载的原理是什么?
原理利用window的scroll事件,把我们不那么迫切需要的资源先不加载,等到我们需要时(鼠标事件)触发,再去请求想要的资源。这样做的好处是,一开始我们并不会完全把 用户是不是真的要浏览的内容呈现,而是由用户选择呈现不呈现。用户节省了流量,网站提高了性能。
5. 实现视频中的图片懒加载效果
http://js.jirengu.com/vujuhawaya/1/