图片预加载和懒加载的多种方法<面试常考>

图片预加载和懒加载

图片懒加载

在渲染页面的时候,先将图片用一张默认图片代替,当图片到达浏览器可视区域时,才显示真实的图片。

这样的好处是,可以减缓服务器负担,加快初始界面的渲染速度。

实现方式:

  • 使用setTimeOut或setInterval定时器进行延迟加载
  • 条件加载,符合条件或触发事件后再进行异步下载
  • 通过滚动条监听用户距图片距离,快要到达之前进行加载
// 通过滚动条监听用户距图片距离,到达进行加载
    let img = document.querySelector('img')
    function lazyLoad(){
      let viewHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
      // 判断图片是否进入可视区
      if(img.offsetTop < viewHeight+scrollTop){
        var url ="https://himg.bdimg.com/sys/portraitn/item/46ecf7f5"
        img.src = url
      }
    }
    window.addEventListener('scroll',lazyLoad)

图片预加载

与懒加载相反,先将图片提前加载到缓存,用户一打开页面就能快速呈现图片。

好处是,遇到一些较大的图片时,可以避免页面慢慢渲染。但是服务器负担会增大。

实现方式:

  • css的background元素会自动预加载
// 预加载的图片不能使用dispaly:none隐藏,只能将其宽高设为0或者移到看不见的地方
  <style>
    li{
      list-style: none;
    }
    #img {
    background-image: url('https://himg.bdimg.com/sys/portraitn/item/46ecf7f5');
    width: 0;
    height: 0;  
    }
  style>

<body>
  <li id="img">li>
  <button>点击展示button>

  <script>
    let btn =  document.querySelector('button')
    let li = document.querySelector('li')
    btn.addEventListener('click',function(){
      let myImg = document.createElement('img')
      myImg.src = 'https://himg.bdimg.com/sys/portraitn/item/46ecf7f5'
      li.appendChild(myImg)
    })

  script>
  
body>
  • JavaScript则常用new Image()实现
    // 预加载图片路径
    const urlList = [
    'https://himg.bdimg.com/sys/portraitn/item/46ecf7f5'
    ]

    function preLoad(){
      let img = new Image()
      img.src = urlList[0]
      // onload是图片加载完成事件
      img.onload = function(){
        console.log('图片预加载成功');
      }
    }
    preLoad()

附:网页视图的api
图片预加载和懒加载的多种方法<面试常考>_第1张图片

你可能感兴趣的:(前端,#,CSS,#,JavaScript,javascript,前端,html,css)