前端网页的懒加载

站长手记作者： 2024-08-28 07:25:01

作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。

什么是懒加载？

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

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

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

懒加载图解

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

懒加载的实现

//进页面直接调用
  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)
  }