问答
1. 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
当一个元素的底部不超过浏览器的上边缘（元素本身的高度+元素到达页面顶端的高度>滚动条滚动的距离），顶部不超过浏览器的下边缘（滚动条滚动的距离+窗口的高度>元素到达页面顶端的高度），就可以说这个元素是在窗口的可视范围之内的。
<pre>function isVisible($node){ var nodeH = $node.height();//获取元素的高度 var offsetTop = $node.offset().top;//获取元素在页面中的高度 var winH = $(window).height();//获取窗口的高度 var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离 if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){ return true; }else{ return false; } }</pre>
2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<pre>`
function isVisible($node){
var nodeH = $node.height();//获取元素的高度
var offsetTop = $node.offset().top;//获取元素在页面中的高度
var winH = $(window).height();//获取窗口的高度
var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离
if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){//对窗口事件进行监听
var rusult = isVisible($node);
if(result){//如果函数返回值是true，元素出现在窗口可视范围
console.log(result);//控制台打印true
}
})
`</pre>
3. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<pre>`
function isVisible($node){
var nodeH = $node.height();//获取元素的高度
var offsetTop = $node.offset().top;//获取元素在页面中的高度
var winH = $(window).height();//获取窗口的高度
var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离
if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){
return true;
}else{
return false;
}
}
var locked = false;//设定状态锁
$(window).on('scroll',function(){//对窗口事件进行监听
if(locked){
return;
}
var rusult = isVisible($node);
if(result){
console.log(result);
locked=true;//当元素第一次出现并且执行代码后，状态锁锁定，这样元素下次再出现时不在做任何处理。
}
})
`</pre>
4. 图片懒加载的原理是什么？
没有使用懒加载：当页面上有大量的图片时，即使图片的大小很小，但是数量很多的情况下，也会达到几十、上百兆。那么当用户打开这个页面的时候，要在很短的时间内将这些图片全部加载好，这样就会导致严重的性能问题，用户会等待很长时间，浏览器甚至会崩溃，这样就会产生较差的用户体验。由此就引出了图片懒加载。
图片懒加载：就是仅仅加载用户可视区域的图片，即使一个页面上有大量的图片，但是呈现在用户眼中的只有浏览器大小的页面，而这个页面中的图片是有限的，较少的，如果仅仅只加载这些页面，并不会出现性能问题。当用户下拉浏览器时，才加载一部分图片。把真实的图片存放在一个自定义属性中，可以用data-src来存放。<img src=“loading.gif/xxxblank.jpg” data-src="http://www.xxx.com/realimg.jpg" />当浏览器下拉到该图片的可视区域时，在把data-src里面的图片地址赋给src属性里面。
本文版权归本人和饥人谷所有，转载请注明来源。
