1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible(node) {
var offfsetTop = node.offset().top;
var scrollTop = $(window).scrollTop();
var height = node.height();
var windowHeight = $(window).height();
if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
console.log("可见");
}
else {
console.log("不可见");
}
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$div = $("div");
$(window).on("scroll", function () {
isVisible($div);
});
var isVisible = function (node) {
var offfsetTop = node.offset().top;
var scrollTop = $(window).scrollTop();
var height = node.height();
var windowHeight = $(window).height();
if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
console.log(true);
}
else {
console.log(false);
}
};
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
$div = $("div");
var clock = 0;
$(window).on("scroll", function () {
isVisible($div);
});
var isVisible = function (node) {
if (clock === 0) {
var offfsetTop = node.offset().top;
var scrollTop = $(window).scrollTop();
var height = node.height();
var windowHeight = $(window).height();
if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
clock=1;
console.log(true);
}
else{
console.log(false);
}
}
}
图片懒加载的原理是什么？
img的src路径可以设置为预加载，真实的图片路径保存在自定义data-src属性里
当页面滚动的时候触发事件检测图片是否被视野范围内，出现的话把img的src路径替换成data-src，设置一个状态锁当替换一次路径之后不再有动作
