任务29-jquery懒加载、回到顶部

问答

1. 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

当一个元素的底部不超过浏览器的上边缘（元素本身的高度+元素到达页面顶端的高度>滚动条滚动的距离），顶部不超过浏览器的下边缘（滚动条滚动的距离+窗口的高度>元素到达页面顶端的高度），就可以说这个元素是在窗口的可视范围之内的。

function isVisible($node){ var nodeH = $node.height();//获取元素的高度 var offsetTop = $node.offset().top;//获取元素在页面中的高度 var winH = $(window).height();//获取窗口的高度 var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离 if(winH+scrollTop>offsetTop && scrollTop

2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

`
 function isVisible($node){
 var nodeH = $node.height();//获取元素的高度
 var offsetTop = $node.offset().top;//获取元素在页面中的高度
 var winH = $(window).height();//获取窗口的高度
 var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离
 if(winH+scrollTop>offsetTop && scrollTop return true;
 }else{
 return false;
 }
 }
 $(window).on('scroll',function(){//对窗口事件进行监听
 var rusult = isVisible($node);
 if(result){//如果函数返回值是true，元素出现在窗口可视范围
 console.log(result);//控制台打印true
 }
 })
 
 
`

DEMO:http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E6%9D%8E%E7%AB%8B%E4%B8%BD/%E4%BB%BB%E5%8A%A129/%E9%97%AE%E7%AD%942.html

3. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

`
 function isVisible($node){
 var nodeH = $node.height();//获取元素的高度
 var offsetTop = $node.offset().top;//获取元素在页面中的高度
 var winH = $(window).height();//获取窗口的高度
 var scrollTop = $(window).scrollTop;//获取滚动条滚动的距离
 if(winH+scrollTop>offsetTop && scrollTop return true;
 }else{
 return false;
 }
 }
 
 
var locked = false;//设定状态锁
 $(window).on('scroll',function(){//对窗口事件进行监听
 if(locked){
 return;
 }
 var rusult = isVisible($node);
 if(result){
 console.log(result);
 locked=true;//当元素第一次出现并且执行代码后，状态锁锁定，这样元素下次再出现时不在做任何处理。
 }
 })
 
 
`

DEMO:http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E6%9D%8E%E7%AB%8B%E4%B8%BD/%E4%BB%BB%E5%8A%A129/%E9%97%AE%E7%AD%943.html

4. 图片懒加载的原理是什么？

没有使用懒加载：当页面上有大量的图片时，即使图片的大小很小，但是数量很多的情况下，也会达到几十、上百兆。那么当用户打开这个页面的时候，要在很短的时间内将这些图片全部加载好，这样就会导致严重的性能问题，用户会等待很长时间，浏览器甚至会崩溃，这样就会产生较差的用户体验。由此就引出了图片懒加载。
图片懒加载：就是仅仅加载用户可视区域的图片，即使一个页面上有大量的图片，但是呈现在用户眼中的只有浏览器大小的页面，而这个页面中的图片是有限的，较少的，如果仅仅只加载这些页面，并不会出现性能问题。当用户下拉浏览器时，才加载一部分图片。把真实的图片存放在一个自定义属性中，可以用data-src来存放。当浏览器下拉到该图片的可视区域时，在把data-src里面的图片地址赋给src属性里面。

本文版权归本人和饥人谷所有，转载请注明来源。