H5图片加载完再展示的一种策略

最新推荐文章于 2022-11-05 20:54:47 发布

吃早餐等我

最新推荐文章于 2022-11-05 20:54:47 发布

阅读量2.1k

点赞数

文章标签： javascript html css html5

本文链接：https://blog.csdn.net/qq_42789068/article/details/107448551

版权

因为经常要做一些一个页面的h5，会遇到那种图片还未完全加载，挤压在一起的0.5秒的瞬间，然后才会展示加载完成的页面。0.5秒如下图所示：
页面加载过程

作为强迫症的我0.1秒都忍受不了。在忽略用框架的前提下找到一种这样一种处理方式，在确认图片加载完后再把root布局展示出来，这里我们也可以做一个Loading页面显示出来，待加载完再隐藏。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>公众号关注</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style>
  #root {
    width: 100%;
    align-items: center;
    justify-content: center;
    display: none; //首先布局不显示出来
    flex-direction: column;
  }
</style>
<body>
  <div id="root">
      <img src="weixinImg/gongzhonghao1.png" style="width:97%;margin-top: 2rem;"/>
      <img src="weixinImg/gongzhonghao2.png" style="width: 79%;margin-top: 2.5rem;"/>
      <img src="weixinImg/gongzhonghao3.png" style="width: 97%;margin-top: 4rem;margin-bottom: 2rem"/>
  </div>

</body>
<script>
  //图片懒加载解决方案 解决图片问题
  window.onload = function(){
    let imgs=document.querySelectorAll('img[src]');
    let imgLen=imgs.length;
    console.log(imgLen);
    var num=0;
    for(var i=0;i<imgs.length;i++){
      !function(index){
        var img=new Image(),u=imgs[index].getAttribute('src');
        img.onload=function(){
          num++;
          imgs[index].src=u;
          if(num==imgLen){
            //加载完了，把布局展示出来
            document.getElementById("root").style.display = 'flex'
          }
        };
        img.src=u;
      }(i);
    }
  };

</script>
</html>

以上。

吃早餐等我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫