懒加载

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

function isVisible($node){ 
    return ($node.offset().top<$(window).height()+$(window).scrollTop())&&\
    ($node.offset().top>$(window).scrollTop())
}

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

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

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

var isFirst = true
$(window).on('scroll',function(){
    if(!isFirst){
        return;
    }
    if(isVisible($('li').eq(8))&&isFirst){
      console.log(true)
      isFirst = false;
    }
})

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

1.什么是懒加载?
在一些图片,文字,视频等内容较多的网站上用户,打开网站会同时加载所有网站内容,用户网速不好时会造成卡顿,体验不好。而为了提高用户体验,即对网站内容进行懒加载,即当内容出现在浏览器窗口时再去加载,这样,一次加载的内容变少,不会造成浏览器的卡顿,提高用户体验。
2.实现原理
懒加载的实现原理很简单,以图片为例,就是把img标签的src设置为空或是一张白图(所有图片都设置为同一张白图,浏览器会缓存而不会重复加载),而把图片地址放在其他地方,比如自定义属性data-src,然后,对图片进行判断,当图片出现在用户窗口时,通过jquery将data-src中图片地址赋值给src,浏览器就会发出请求,加载图片。

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

效果
demo

题目6(选做): 实现如下 新闻自动懒加载效果59 (这里是参考代码259, 其中html里的为前端代码, js 里的内容为 router.js里的后端代码, 也可参考往前班级视频254)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1- 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。用函数isVisible实现...
    osborne阅读 3,258评论 0 1
  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,552评论 18 160
  • 题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...
    柚丶稚橙熟时阅读 1,427评论 0 0
  • 题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...
    湖衣阅读 1,580评论 0 0
  • 昏昏乎,不知年岁!噩噩矣,恍如隔世! 自分开二月不足,其间亦多事发生,吾心之悲切,概莫能知。然此心可鉴明月,此情延...
    newborn_954a阅读 2,563评论 0 0

友情链接更多精彩内容