如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollHeight=$(window).scrollTop();//滚动条的高度
var windowHeight=$(window).height();//浏览器窗口的高度
var offsetHeight=$($node).offset().top;//元素到页面的顶部的偏移
if(offsetHeight<scrollHeight+windowHeight&&offsetHeight>scrollHeight){
return true;
}else {
return false;
}
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function($node){
var scrollHeight=$(window).scrollTop();
var windowHeight=$(window).height();
var offsetHeight=$($node).offset().top;//$node是传入的元素
if(offsetHeight<scrollHeight+windowHeight&&offsetHeight>scrollHeight) {
console.log("true");
}
})
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isLoad($node){
$(window).on('scroll',function($node){
var scrollHeight=$(window).scrollTop();
var windowHeight=$(window).height();
var offsetHeight=$($node).offset().top;
if(offsetHeight<scrollHeight+windowHeight&&offsetHeight>scrollHeight){
if($($node).attr('src')===$($node).attr('data-src')) {
return true;
}else {
$($node).attr('src',$($node).attr('data-src'));
console.log('true');
}
}
});
}
图片懒加载的原理是什么？
如果网页的图片过多，全部加载的时候，会很慢，用户体验不好，为了使网页加载速度更快，我们就先加载出现在浏览器窗口的图片，不在窗口范围内的图片，等滚动到的时候再加载，这样页面的加载速度会提高很多。
实现原理是这样的，把图片的真实地址放到图片的一个自定义属性上，一般是data-src,图片的src放的是指向一张空白图片的地址，当页面加载时判断图片位置是否出现在了可视区域内。如果出现在可视区域了那么就把data-src的真实地址赋值给src,加载之后的图片不再做处理。
