懒加载

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

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

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

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

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

  $node.data('flag',true)
  function isVisible($node){
    if ($node.offset().top >= $(window).scrollTop() & $node.offset().top <= $(window).scrollTop() +  $(window).height() ){
      $node.data('flag',false)
      return true
    }
  }
  $(window).scroll(function(){
    if ( $node.data('flag') ) 
      if (isVisible($node)) console.log(true)
  })

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

  • 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储在img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
  • 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

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

http://output.jsbin.com/doruhi

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,503评论 18 160
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 379评论 1 2
  • 题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...
    湖衣阅读 197评论 0 0
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    _Dot912阅读 1,686评论 10 8
  • 匆匆忙忙, 忙忙碌碌, 碌碌无为, 是为什么? 为生活? 为未来? 为希望? 眼已花, 口已干, 书翻烂。 花都谢...
    寒更雨歇阅读 187评论 4 6