懒加载

2018-08-26 17:26:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。

认识懒加载

什么是懒加载?

懒加载是一种在页面加载时延迟加载一些非关键资源的技术,换句话说就是按需加载。

我们之前看到的懒加载一般是这样的形式:

  • 浏览一个网页,准备往下拖动滚动条
  • 拖动一个占位图片到视窗
  • 占位图片被瞬间替换成最终的图片

为什么使用懒加载而不直接加载?

  • 浪费流量。在不计流量收费的网络,这可能不重要;在按流量收费的网络中,毫无疑问,一次性加载大量图片就是在浪费用户的钱。
  • 消耗额外的电量和其他的系统资源,并且延长了浏览器解析的时间。因为媒体资源在被下载完成后,浏览器必须对它进行解码,然后渲染在视窗上,这些操作都需要一定的时间。

懒加载图片和视频,可以减少页面加载的时间、页面的大小和降低系统资源的占用,这些对于性能都有显著地提升。总体来讲,就是改善用户体验,增强页面性能。

 

图解

通过下图所示(绿色为页面范围,红色为窗口范围,蓝色为待显示元素)。 $(window).scrollTop() 为 页面顶部 到 窗口顶部的高度。 $(window).height() 为 窗口的高度。$node.offset().top 为页面顶部到待显示元素的高度。即我们可以知道如何判断一个元素,是否进入用户视野范围内,即

$node.offset().top <= $(window).height() + $(window).scrollTop()

条件满足的时候,这个元素就进入了我们的视野。

 

进入视野 与 抵达底部

如何判断元素出现在用户视野?
$(window).scrollTop()为 页面顶部 到 窗口顶部的高度。$(window).height()为 窗口的高度。$node.offset().top 为页面顶部到待显示元素的高度。即我们可以知道如何判断一个元素,是否进入用户视野范围内,即
$(window).height() + $(window).scrollTop() >= $node.offset().top 条件满足的时候,这个元素就进入了我们的视野。(上图已经分析过)

如何判断浏览器滚动到最底部?
$(window).scrollTop()为 页面顶部 到 窗口顶部的高度。$(window).height()为 窗口的高度。$('body').height() 为页面整个文档的高度。即我们可以知道如何判断浏览器是否滚动到最底部,即$(window).height() + $(window).scrollTop() >= $('body').height() 条件满足的时候,浏览器滚动到最底部。

懒加载的实现

  //进页面直接调用
  start()
  // 滚动的时候执行加载函数
  $(window).on('scroll',function(){
    start()
  })

  //加载函数
  function start(){
    //not('[data-isLoaded]') 用来过滤已经加载过的,实现节流
    $('.container img').not('[data-isLoaded]').each(function(){
      if( isShow($(this)) ){
        loadImg($(this))
      }
    })
  }

  // 判断是否进入视野的函数
  function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
  }

  // 格式化图片加载地址函数
  function loadImg($img){
    //setTimeout模拟延迟 测试效果用,实际环境不要加
    // setTimeout(function(){
      $img.attr('src', $img.attr('data-src'))
    // },500)
     //加载过后就添加 data-isLoaded属性
      $img.attr('data-isLoaded',1)
  }
View Code

 

Demo 效果预览

懒加载效果预览
该 demo 添加了 setTimeout 便于直观的查看懒加载的效果,实际应用的时候不要添加,因为懒加载的作用就是增强用户体验的。

结合该 demo 更好的理解之前的图解

 
$(window).height() + $(window).scrollTop() < $(node).offset().top
 
$(window).height() + $(window).scrollTop() >= $(node).offset().top

 

参考

滚动加载图片(懒加载)实现原理
懒加载是如何实现的?

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:语音一对一聊天

下一篇:js--基础算法