渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象

admin2024-04-03  0

1、演示 

渐进式图片解决前端在页面中使用大图,图片体积过大导致页面出现白屏现象,第1张

2、什么渐进式图片

3、实现方法

3.1 啥也不用做

3.2 代码实现

实现原理:在最开始的时候,大图是隐藏的,小图示显示的,等大图加载完成,显示大图,隐藏小图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigImg {
        width: 100%;
        height: 100vh;
      }
      .smallImg {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <img src="./big.png" alt="" class="bigImg" style="display: none" />
    <img src="./samll.png" alt="" class="smallImg" style="display: block" />
  </body>
  <script>
    const bigImg = document.querySelector('.bigImg')
    const smallImg = document.querySelector('.smallImg')

    bigImg.addEventListener('load', function () {
      console.log('大图已加载完成,小图隐藏,大图展示')
      bigImg.style.display = 'block'
      smallImg.style.display = 'none'
    })
  </script>
</html>
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!