懒加载

作者: 南山码农 | 来源:发表于2017-08-13 11:05 被阅读0次

题目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)

相关文章

  • iOS开发,懒加载

    什么是懒加载? 懒加载--比较懒的加载方式,需要的时候才加载,也称为延时加载。 所谓懒加载既是重写get方法,一定...

  • iOS开发UI篇-懒加载、重写setter方法赋值

    一、懒加载 1.懒加载定义 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的...

  • Fragment结合ViewPager之懒加载

    什么是懒加载?为什么要用懒加载?### 1、什么是懒加载 懒加载就是当ViewPager和Fragment结合在一...

  • iOS懒加载注意事项

    懒加载 1.懒加载 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的是其ge...

  • web优化之懒加载和预加载

    懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。懒加载:懒加载也加延迟加载,延迟...

  • fragment 懒加载

    fragment 的懒加载 懒加载 什么是懒加载:只有在 fragment 显示在界面的时候,才进行数据的加载 懒...

  • 懒加载和预加载

    懒加载和预加载 1. 懒加载 1. 什么是懒加载? 懒加载也就是延迟加载 当访问一个页面的时候,先把img元素或是...

  • Android 懒加载优化

    目录介绍 1.什么是懒加载1.1 什么是预加载1.2 懒加载介绍1.3 懒加载概括 2.实际应用中有哪些懒加载案例...

  • Swift语法点

    1 懒加载 懒加载与OC中的懒加载的区别:懒加载的类一旦 设置为nil 后, 懒加载就不会再次执行,与OC中不同,...

  • UICollectionView

    UICollectionViewFlowLayout懒加载 UICollectionView懒加载 注册item ...

网友评论

      本文标题:懒加载

      本文链接:https://www.haomeiwen.com/subject/tdpsrxtx.html