懒加载相关问题

懒加载相关问题

<!--more-->

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

 function isVisible ($node) {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        var targetOffsetTop = $node.offset().top;

        if (targetOffsetTop < (scrollTop + windowHeight) && targetOffsetTop > scrollTop) {
            return true;
        }
        return false;
    }

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

    //$node为目标元素

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

    function isVisible($node){
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $node.offset().top

        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
            return true
        }
        return false
    }

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

 //$node为目标元素
    function checkshow ($node) {
        var windowHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var nodeOffsetTop = $node.offset().top;

        if (nodeOffsetTop < (windowHeight + scrollTop) &&　nodeOffsetTop > scrollTop) {
            return true;
        }
        else {
            return false;
        }
    }
    function firstShow ($node) {
        $node.data('hasShowed',false); //自定义一个属性来标记元素是否已经被展示过了
        if (checkshow($node)) {
            if (!$node.data('hasShowed')) { //第一次时为false
                $node.data('hasShowed',true);
                console.log(true);
            }
        }
    }

###4,图片懒加载的原理是什么？ 对于一个有多个图片的网站来说，访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。

我们可以通过给img自定义一个新属性，来存储图片真实的src地址，当需要加载的时候，再将这个真实的地址赋给src，进行图片加载。

###整体思路： 所以大体的思路为：

• 设置个data-src(自定义一个属性)来存放真实地址
• 当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续再进行判断，看其是否已经被加载过了，如果还没有被加载过，那就进行加载。