jQuery__懒加载

1.为什么学习懒加载? 懒加载是网站解决性能问题最常见的方式 2.涉及server-mock 工具的使用

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

<script>
    function isVisible($node) {
        var windowHeight = $(window).height(),
            scrollTop = $(window).scrollTop(),
            offsetTop = $node.offset().top,
            nodeHeight = $node.height();
        if (windowHeight + screenTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
           return true;//第一次出现将在屏幕和第一次将离开屏幕前
        } else {
           return false;
        }
    }
</script>

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

//下面isVisible()为第一题的方法
    $(window).on('scroll',function(){
        if(isVisible($node)){
            console.log('true');
        }else{
            console.log('false')
        }
    })
</script>

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

   //窗口滚动
    $(window).on('scroll', function () {
        //判断元素是否包含标记的类来判断是否为第一次出现在屏幕里
        if (!($(node).hasClass('hasLoad'))) {
            if (isVisible($node)) {
                console.log('true');
                $(node).addClass('hasLoad')//�第一次出现给node添加一个类作为标记
            }
        } else {
            return false;
        }
    })

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

• 为什么要懒加载（延迟)
  对于图片过多过大的页面，网速慢时,为了加速页面加载速度，
  所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
  这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

• 如何实现
  在页面载入的时候将页面上的img标签的src指向一个loading图片， 把真实地址存放在一个自定义属性data-src中，通过监听scroll事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。如下:
  ![](loading.gif)

5. 实现图片懒加载效果

QQ20170523-113611-HD.gif

预览

源码

6. 实现新闻懒加载效果

QQ20170524-130545-HD.gif

源码