背景轮播及预加载

2023/5/29 2023/5/29

轮播效果

开始用js写的，后面发现有点难改，还是用css动画来做了这个轮播效果：以下是我的css源代码

展开查看

#home-head {
   width: 100vw;
   height: 100vh;
   position: relative;
   display: flex;
   background-image: url(../image/bg6.jpg)  ;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1440px 1020px;
   background-attachment:local;
   background-origin:content-box;
   background-size: cover;
   opacity: 1;
   animation: fateimg 50s linear infinite;
   z-index: -1000000;
}
@keyframes fateimg{
   0%{background: url(../image/bg6.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   8%{background: url(../image/bg6.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   11%{background: url(../image/bg2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   20%{background: url(../image/bg2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   21%{background: url(../image/bg2.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   24%{background: url(../image/bg3.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   24.5%{background: url(../image/bg3.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   34%{background: url(../image/bg3.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   37%{background: url(../image/bg4.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   37.5%{background: url(../image/bg4.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   47%{background: url(../image/bg4.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   50%{background: url(../image/bg5.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   49.5%{background: url(../image/bg5.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   60%{background: url(../image/bg5.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   63%{background: url(../image/bg1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   63.5%{background: url(../image/bg1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   73%{background: url(../image/bg1.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   76%{background: url(../image/bg7.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   76.5%{background: url(../image/bg7.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   86%{background: url(../image/bg7.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   89%{background: url(../image/bg8.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   89.5%{background: url(../image/bg8.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   98%{background: url(../image/bg8.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
   100%{background: url(../image/bg6.jpg);opacity: 1;background-repeat: no-repeat;background-size:cover ;}
 
}

完成以上配置可以基本开始轮播了，但是还有缺陷，就是每次切换图片时才开始加载，导致图片还未加载出来，动画就已经开始了，有时是会闪一下开始切换，这都是没有加载完全的问题

2.问题解决

js解决：

展开查看

const imagePaths = [
    '../image/bg1.jpg',
    '../image/bg2.jpg',
    '../image/bg3.jpg',
    '../image/bg4.jpg',
    '../image/bg5.jpg',
    '../image/bg6.jpg',
    '../image/bg7.jpg',
    '../image/bg8.jpg'
  ];
  const loadImages = (imagePaths) => {
    const promises = [];
  
    for (let i = 0; i < imagePaths.length; i++) {
      const promise = new Promise((resolve, reject) => {
        const image = new Image();
        image.onload = resolve;
        image.onerror = reject;
        image.src = imagePaths[i];
      });
  
      promises.push(promise);
    }
    
    return Promise.all(promises);
  };
  
  loadImages(imagePaths).then(() => {
      sliderBg=document.getElementById('home-head')
      sliderBg.style.animation="fateimg 50s linear infinite";
      //使用这条js需要把css中animation属性删除

    // 所有图片已经预加载完成，在此处开始执行动画
  });

记得删除css中的animation属性

使用js在我的本地端是可以预加载的，但是放到网站就不行，这里我感到很奇怪，但是我还有我自己的预加载土方法，嘻嘻嘻

html+css进行预加载:

展开查看

.aa{
  background-image: url(../image/bg1.jpg);
  width: 0;
  height: 0;
}
.aa1{
  background-image: url(../image/bg2.jpg);
 
  width: 0;
  height: 0;
}
 .aa2{
  background-image: url(../image/bg3.jpg);
  
  width: 0;
  height: 0;
} 
.aa3{
  background-image: url(../image/bg4.jpg);
 
  width: 0;
  height: 0;
} 
.aa4{
  background-image: url(../image/bg5.jpg);
  width: 0;
  height: 0;
}
.aa5{
  background-image: url(../image/bg6.jpg);
  width: 0;
  height: 0;
}
.aa6{
  background-image: url(../image/bg7.jpg);
  width: 0;
  height: 0;
}
.aa7{
  background-image: url(../image/bg8.jpg);
  width: 0;
  height: 0;
}

        <div class="aa"></div>
        <div class="aa1"></div>
        <div class="aa2"></div>
        <div class="aa3"></div>
        <div class="aa4"></div>
        <div class="aa5"></div>
        <div class="aa6"></div>
        <div class="aa7"></div>

简单粗暴！

最后还是使用纯html+css完成了这个轮播切换效果，哈哈哈哈哈

LOADING...

背景轮播及预加载

轮播效果

2.问题解决

js解决：

html+css进行预加载:

简单粗暴！