任务29

问答

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

function isVisible($elem) {
        var srollHeight=$(window).scrollTop(),
            windowHeight=$(window).height(),
            elemTop=$elem.offset().top;
        if(srollHeight+windowHeight>elemTop){
            return true;
        }else{
            return false;
        }
    }

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

var clock;
var $second=$(".second");
$(window).on("scroll",function () {
    if(clock){
        clearTimeout(clock);
    }
    clock=setTimeout(function () {
        if(isVisible($second)){
            alert(true);
        }
    },200)
})
function isVisible($elem) {
    var srollHeight=$(window).scrollTop(),
        windowHeight=$(window).height(),
        elemTop=$elem.offset().top;
    if(srollHeight+windowHeight>elemTop){
        return true;
    }else{
        return false;
    }
}

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

var clock;
var $second=$(".second");
$(window).on("scroll",function () {
    if(clock){
        clearTimeout(clock);
    }
    clock=setTimeout(function () {
       checkShow($second);
    },200)
})
function checkShow($elem) {
    if($elem.attr("isLoaded")){
        return;
    }
    if(isShow($elem)){
        $elem.attr("isLoaded",true);
        alert(true);
    }
}
function isShow($elem) {
    var srollHeight=$(window).scrollTop(),
        windowHeight=$(window).height(),
        elemTop=$elem.offset().top;
    if(srollHeight+windowHeight>elemTop){
        return true;
    }else{
        return false;
    }
}

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

** 什么是图片懒加载：**图片懒加载通常应用于图片比较多的网页。当图片比较多时，浏览器分好几屏才能显示所有图片，在不使用图片懒加载时，页面首次加载，要加载所有图片，因此要发送n多个HTTP请求，影响web性能；而使用图片懒加载技术时，页面初次加载，只加载浏览器可视区域中的图片，即只加载第一屏中的图片，当滚动页面时，再加载将要进入浏览器可视区域的图片。这样可以显著的提高页面的加载速度，提升用户体验；并且更小的并发请求也可以减轻服务器的压力，而且如果用户只浏览首屏的话，还可以节省流量
图片懒加载原理：先为所有的<img>标签的src属性指定同一张空白图片作为占位符（这里设置成空白图片是因为如果将src=" "，某些浏览器可能会出现X，因为每个img地址都是同样的，浏览器会缓存，因此只会加载一次这个图片），然后把图片的真实url存储在自定义的"data-src"属性中，当首次加载页面完成后（onload）或滚动页面(onscroll)时，判断哪些图片将出现在浏览器可视区域，把这些图片的src属性值设置为"data-url"的属性值。

代码

1、实现如下回到顶部效果（难度: ***）

预览
源码

2、实现如下图片懒加载效果 (难度：***)

预览
源码

3、实现如下无限滚动效果(难度：****) 本地测试通过

预览
源码