android懒加载简书,懒加载

题目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： 实现视频中的图片懒加载效果

lazyload

img{

display: block;

height: 200px;

margin: 5px auto;

}

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'))

}