- 懒加载是网站解决性能问题最常见的方法
- 熟练 server-mock 工具的使用
题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop = $(window).scrollTop(); // 滑动高度
var windowHeight = $(window).height(); // 可视高度
var elementHeight = $node.offset().top // 元素位置高度
if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
return true;
}
return false;
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll', function(){ // 绑定一个滑动事件
var $node = document.getElementById('node'); // 节点位置
if(isVisible($node)){ // 每次出现都在控制台打印true;
console.log('true');
}
});
// 判断是否出现在窗口可视范围的函数
function isVisible($node){
var scrollTop = $(window).scrollTop(); // 滑动高度
var windowHeight = $(window).height(); // 可视高度
var elementHeight = $node.offset().top // 元素位置高度
if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
return true;
}
return false;
}
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
$(window).on('scroll', function(){ // 绑定一个滑动事件
var $node = document.getElementById('node'); // 节点位置
var switch = true; // 第一次出现的开关
if(isVisible($node)){
if( switch ){ // 判断是否第一次
console.log('true');
switch = false; // 关闭第一次
}
}
});
// 判断是否出现在窗口可视范围的函数
function isVisible($node){
var scrollTop = $(window).scrollTop(); // 滑动高度
var windowHeight = $(window).height(); // 可视高度
var elementHeight = $node.offset().top // 元素位置高度
if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
return true;
console.log('true');
}
return false;
}
题目4： 图片懒加载的原理是什么？
-
什么时图片懒加载？
- 当访问一个页面的时候，先把 img 元素或者其他元素的背景图片路径替换成一张1*1px的白色图片路径（这样的话就只需要请求一次），只有当页面出现在浏览起的可视范围以内时，才设置图片真正的路径，让图片显示出来。这就时懒加载。
-
为什么要使用这个技术？
- 比如购物网站图片特别多，如果一访问页面就发这么多请求，页面加载会很慢，更有可能服务器吃不消。
- 优点：减轻服务器压力，可以让页面加载更快的呈现在用户面前(用户体验比较好)。
-
如何实现？
- 先把img元素的路径设置为一张1*1px（白色）图片路径，把真实路径地址放置在自定义属性 data-src 中。
- 当页面滑动的时候检查所有的img元素，看看是否在可视窗口以内，如果在视野内在看看是否加载过，没有的加载的话就加载图片
可视窗口以内：要知道 滑动高度（垂直滚动条滚动的距离）/窗口高度（可视区高度）/元素位置高度（元素离文档顶部的高度）
- 滑动高度：
- 原生JS: window.pagaYOffset
- jQuery: $(window).scrollTop()
- 窗口高度:
- 原生JS: window.innerHeight
- jQuery: $(window).height();
- 元素位置高度:
- 原生JS: element.scrollHeight
- jQuery: $(this).offset().top
