懒加载 的应用

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

function isVisible($node){
 }

函数：

function isVisible($node){
    var windowHeight = $(window).height(), //窗口的高度
        scrollTop = $(window).scrollTop(), //窗口的滚动距离
        nodeHeight = $node.outerHeight(true), //元素的高度
        nodeOffset = $node.offset().top;  //元素到页面顶部的距离
    if(scrollTop+windowHeight>nodeOffset && scrollTop<nodeOffset+nodeHeight){
             $node.addClass('ok'); //确定出现的元素添加class'ok'
             return true
    }else{return false}
}

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

function isVisible($node) {
            var winHe = $(window).height();
            var scrollTop = $(window).scrollTop();
            var offsetTop = $node.offset().top;
            var height = $node.innerHeight();
            if ( (winHe + scrollTop ) > offsetTop && (scrollTop < offsetTop + height) ) {
                return true;
            }else {
                return false;
            }
}
var p = $('p');
$(window).on('scroll',function(){
  if (isVisible(p)) {
  console.log('true');
}else {
 console.log('false'); 
}
})

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

function isVisible($node) {
            var winHe = $(window).height();
            var scrollTop = $(window).scrollTop();
            var offsetTop = $node.offset().top;
            var height = $node.innerHeight();
            if ( (winHe + scrollTop ) > offsetTop && (scrollTop < offsetTop + height) ) {
                return true;
            }else {
                return false;
            }
}
var $name = $('p').eq(0);
$(window).on('scroll',function(){
  result($name);
})
function result($node) {
  if (isVisible($node) && !$node.hasClass('show')) {
  console.log('true');
    $node.addClass('show');
}
}

4- 图片懒加载的原理

• 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
• 如何加载图片
  • 自定义属性 data-src="图片地址"
  • 需要加载的时候(待加载图片位置在用户视线范围内)将图片地址填入img标签的src
  • url = img.getAttribute('data-src')
  • img.setAttribute('src', url)
• 如何判断用户看到图片(待加载图片位置在用户视线范围内)
  • 关键:
    • $node.offset().top 元素距离document顶端的距离
    • $(window).height() 浏览器窗口的高度
    • $(document).scrollTop() document滑动的距离
  • 元素出现的条件: $(window).height() + $(document).scrollTop() >= $node.offset().top

5- 实现图片懒加载效果

懒加载效果
代码

6- 实现 新闻自动懒加载效果 （这里是参考代码， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考其他视频)

其他参考：
新闻懒加载1
懒加载 新闻2
新闻懒加载3

• 代码
  图片懒加载代码