懒加载～ - Githubissues

无图不欢

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

`
    `

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

`
      $(window) .on('scroll',function(){
          isinwindow($(c))
          function isinwindow($ele) {
              var scrollTop = $(window).scrollTop()
              var winH = $(window).height()
              var offsetTop = $ele.offset().top
              var eleH = $ele.height()

              if ( offsetTop < scrollTop + eleH  && winH + scrollTop > offsetTop){
                  console.log( 'Yeah' )
              } else {
                  console.log( 'Oh,No.' )
              }
          }
      })
`

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

`

`

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

显示器打开一个网页，屏幕上你能看到的就加载显示给你看～你看不到的，我就不加载，因为懒～懒：
因为可以省大家的流量～
更可以说上为你省流量，你不会想一登录一个网页看下大概就没了几十兆流量吧0.0 （理论上都上第一点）
为公司省钱～（理论上第一点）
因为只加载你所看到的，所以你（用户）体验非常好。在当今4G网络（电脑不提了）..那么加载上很流畅的...

以上个人理解上很重要的，每人都可拥有各自见解，但原理一样即可～

来点官方版本的： 在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定程度上提升了系统性能，但是当数据量过大时，缓存就不太合适了。因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。而另一种技术，懒加载可以解决这种问题。

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

HuangHongRui / Notebook

懒加载～ #14

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