懒加载

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

实现

function isVisible($node){
        var scrolltop= $(window).scrollTop()
        var windowheight= $(window).height()
        var offsetTop=  $img.offset().top
if(  offsetTop< scrolltop+windowheight  &&  offsetTop> scrolltop){
        return true;
}
        return false;
 }

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

调用上面的函数
$(window).on('scroll',function(){
            console.log(isVisible($('node')))

})

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

$(window).on('scroll',function(){
          if(isVisible($('node')) && !$('node').data('loaded')){
              console.log(true)
              $('node').data('loaded',true)
         }
})

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

为提高性能，使用户上网体验、速度更佳
当访问一个页面时，用户未需求的图片不予以加载，（将img元素src替换成一个空白占位图的路径，只需要发送一条网络请求，接下来就可以在浏览器缓存中找到，），当图片出现在浏览器的可视区域内， 才进行加载， 设置图片真正的路径

简单说就是 不需要时不加载，用时再加载

5 实现视频中的图片懒加载效果

代码