如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
<pre>`
<script>
function isVisible($node){
var offsetTop = $node.offset().top //偏移
var scrollTop = $(window).scrollTop() //滚动条高度
var winHeight = $(window).height() //视窗高度
var eleHeight = $node.height()
if ( offsetTop + eleHeight < scrollTop + winHeight && offsetTop > scrollTop) {
console.log('看到了')
} else {
console.log('还没看到')
}
}
isVisible($(a)) //看到`
isVisible($(b)) //木有
</script>`</pre>
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<pre>`
$(window) .on('scroll',function(){
isinwindow($(c))
function isinwindow($ele) {
var scrollTop = $(window).scrollTop()
var winH = $(window).height()
var offsetTop = $ele.offset().top
var eleH = $ele.height()
if ( offsetTop < scrollTop + eleH && winH + scrollTop > offsetTop){
console.log( 'Yeah' )
} else {
console.log( 'Oh,No.' )
}
}
})
`</pre>
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<pre>`
<script>
var justOne;
$(window).on('scroll', function() {
isShow($(c))
function isShow($ele) {
var scrollTop = $(window).scrollTop()
var winH = $(window).height()
var offsetTop = $ele.offset().top
var eleH = $ele.height()
if ( justOne != true && offsetTop < eleH + scrollTop && offsetTop < winH + scrollTop) {
justOne = true;
console.log("出现在视窗～")
}
}
})
</script>
`</pre>
图片懒加载的原理是什么？
- 显示器打开一个网页，屏幕上你能看到的就加载显示给你看～
你看不到的，我就不加载，因为懒～
懒： - 因为可以省大家的流量～
- 更可以说上为你省流量，你不会想一登录一个网页看下大概就没了几十兆流量吧0.0 （理论上都上第一点）
- 为公司省钱～（理论上第一点）
- 因为只加载你所看到的，所以你（用户）体验非常好。在当今4G网络（电脑不提了）..那么加载上很流畅的...
以上个人理解上很重要的，每人都可拥有各自见解，但原理一样即可～
来点官方版本的：
在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。
Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定程度上提升了系统性能，但是当数据量过大时，缓存就不太合适了。因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。而另一种技术，懒加载可以解决这种问题。
