懒加载
2017-06-23 本文已影响0人
李永州的FE
题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight ){
return true;
}
else {
return false;
}
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function(){
if(isVisible($('p'))){
console.log(true);
}
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var isVis = false; //设置一个标志位
$(window).on("scroll",function(){
if(!isVis){
isVisible($(".test")); //不可见才进入isVisible函数
}
else{
return; //一旦标志位为true，那么就不做任何处理
}
})
function isVisible($node){
var winH = $(window).height(),
offsetY = $node.offset().top;
if( (scrollY+winH) > offsetY ){
console.log("true");
isVis = true; //第一次出现，设为true
return true;
}
else{
console.log("false");
return false;
}
}
题目4： 图片懒加载的原理是什么？
在图片加载前可以将图片设置为一个空白的图片或者加载中图片，在图片可视(offsetH < winH + scrollH)时将图片通过设置ajax 或者 data属性来加载图片，这样就能避免加载网页同时加载大量图片引起的页面卡顿情况。
题目5： 实现视频中的图片懒加载效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lazyload</title>
<style>
img{
display: block;
height: 200px;
margin: 5px auto;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var img =''
for(var i=0;i<20;i++){
img += '' //错误1，少加了一个分号，log到怀疑人生
}
$('body').append(img)
lazyLoad();
//每次都是全部加载了，log到。。，原来img没设置高度
$(window).scroll(function(){
lazyLoad();
})
function lazyLoad(){
$('img').each(function(){
if(isVisible($(this))&&!isLoaded($(this))){
loadImg($(this))
}
})
}
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < windowHeight + scrollTop&&offsetTop > scrollTop){
return true
}
}
function isLoaded($node){
if($node.attr('src') === $node.attr('data-src')){
return true
}
return false
}
function loadImg($node){
$node.attr('src',$node.attr('data-src'))
}
</script>
</body>
</html>
