jquery 懒加载&回到顶部

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

function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('在可视窗口中');
            return;
        } 
    }

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

$(window).on('scroll', function(){
        isVisible($node);
    });
    function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('true');
            return;
        } 
    }

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

$(window).on('scroll', function(){
        if (!$box.data('data-show')) {
            isVisible($node);
        }
    });
    function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('true');
            $node.data('data-show', true);
            return;
        } 
    }

• 图片懒加载的原理是什么？
• 图片的懒加载(动态加载)就是通过读取img元素，然后获得img元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。

<img src="" data-src="url" alt="">

• 实现如下回到顶部效果（难度: ***）当页面滚动到一定距离时，窗口右下角会出现回到顶部
  按钮，点击按钮页面会滚动到顶部。效果预览
  实现效果

• 实现如下图片懒加载效果 (难度：***)效果预览
  实现效果

• 实现如下无限滚动效果(难度：****)。当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色提示
  ：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。效果预览ps：自己实现效果后，可参考 demo 里的注释
  实现效果

本博客版权归 本人和饥人谷所有，转载需说明来源