懒加载

题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现

   function isVisible($node){
        var windowH=$(window).height();
        var st=$node.scrollTop();
        var ot=$node.offset().top;
        var nodeH=$node.outerHeight();
        if( ot

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

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

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

  $(window).on('scroll',function(){
   if(isVisible($node)){
   if(!$node.hasClass('first')) //node的classname默认没有first的
       node.addClass('first')    
       console.log('true') }
 })

题目4: 图片懒加载的原理是什么?

原理:通过监听窗口的滚动($(window).scroll()),来判断某一图片是否出现在当前窗口中,出现则将图片的src改变,来加载图片。
为什么要使用懒加载
因为对于浏览器来说,当网页上有img标签的时候,会发出一个请求,当img标签很多的时候,那浏览器的请发也就很多了。这一行为当在网速不好的时候,会造成网页卡顿等情况,所以当图片出现在用户界面中,能被看见的时候,在去加载图片。

题目5: 实现视频中的图片懒加载效果
demo: 修改版
demo: 未修改版

题目6: 实现视频中的新闻懒加载效果
demo

你可能感兴趣的:(懒加载)