图片预加载和懒加载的多种方法

会飞的战斗鸡

已于 2022-11-16 17:46:27 修改

阅读量1.6k

点赞数

分类专栏：前端 # CSS # JavaScript 文章标签： javascript 前端 html css

于 2022-05-04 12:13:19 首次发布

本文链接：https://blog.csdn.net/qq_47234456/article/details/124568755

版权

前端同时被 3 个专栏收录

96 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 1 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

图片预加载和懒加载

图片懒加载

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

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

实现方式：

使用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
请添加图片描述

会飞的战斗鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片预加载和懒加载的多种方法

图片预加载和懒加载图片懒加载在渲染页面的时候，先将图片用一张默认图片代替，当图片到达浏览器可视区域时，才显示真实的图片。这样的好处是，可以减缓服务器负担，加快初始界面的渲染速度。实现方式：使用setTimeOut或setInterval定时器进行延迟加载条件加载，符合条件或触发事件后再进行异步下载通过滚动条监听用户距图片距离，快要到达之前进行加载// 通过滚动条监听用户距图片距离，到达进行加载 let img = document.querySelector('img')
复制链接

扫一扫