jquery回到顶部及懒加载基础知识问答

一、问答

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

        function isVisible($node){
            var scrollH=$(window).height()+$(window).scrollTop(),
                selfDoc=$node.offset().top,
                selfH=$node.outerHeight(true);
            if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
                return true
            }
            else  return false
        }

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

        $(window).on("scroll",function () {
            if (isVisible($node)){
                console.log("true");
            }
        })

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

         $(window).on("scroll",function () {
             $("$node").each(function () {
                 var $cur=$(this);
                 if (lode($cur.attr("isLoded"))){
                     return
                 }
                 if (isVisible($cur)){
                     lode($cur);
                 }
             });
             function lode($ele) {
                 $ele.attr("isLoded",true);
             }
             function isVisible($node){
                 var scrollH=$(window).height()+$(window).scrollTop(),
                         selfDoc=$node.offset().top,
                         selfH=$node.outerHeight(true);
                 if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
                     return true
                 }
                 else {
                     return false
                 }
             }
     })

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

通过判断当前元素是否出现在浏览器窗口的可视范围内（滚动的垂直距离加上窗口的垂直距离大于指定元素到文档的垂直距离），如果在则立即加载事先设定好的图片【通过属性设置的方法，将自定义的img属性值（预加载的真实url地址）把原有事先设定好的非真实img的src值给替换掉】；

二、代码

（一）、实现如下回到顶部效果

当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。

    
    
    




    

    
内容1
    
内容1
    
内容2
    
内容3
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容2
    
内容3
    
内容1
    
内容2
    
内容3
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容1
    
内容2
    
内容3
    
内容1
    
内容2
    
内容3
        
内容1
        
内容2
        
内容3
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容2
        
内容3
        
内容1
        
内容2
        
内容3
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容1
        
内容2
        
内容3
        
内容1
        
内容2
        
内容3
    
回到顶部
    
    
    

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-1.html

（二）、实现如下图片懒加载效果

    
    
    




    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    
hello 

    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


    
    

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-2.html

（三）、实现如下无限滚动效果

当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色。

提示：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。
效果预览
ps：自己实现效果后，可参考 demo 里的注释

HTML代码：

    
    
    
    



    
内容1
    
内容2
    
内容3
    
内容4
    
内容5
    
内容6
    
内容7
    
内容8
    
内容9
    
内容10
    
内容11

加载更多

php代码：

1, 'data'=>$items);
    echo json_encode($ret);
?>

HTML代码预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/3/renwu29-3.html

本地测试成功：

本地测试成功

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *