如何将预加载器（Preloader）的FontAwesome图标替换为自定义图片

Hey there! Let's get that preloader switched over to your custom images instead of FontAwesome icons. The main fix is swapping out the icon HTML for image tags and tweaking the CSS to make sure your images play nice with the existing rotation animation. Here's a step-by-step breakdown:

Step 1: Update the JavaScript Image Array #

Replace the FontAwesome <i> tags in the images array with <img> tags pointing to your custom image files. Make sure the paths are correct (relative to your HTML file or absolute URLs).

Step 2: Tweak CSS for Custom Images #

The original CSS was built for icon fonts—we need to adjust it to handle actual images. We'll add styles to ensure images scale properly and maintain their aspect ratio during the animation.

Step 3: Optional: Adjust Animation Timing (If Needed) #

If your images are larger/smaller than the original icons, you might want to tweak the animation duration or rotation angles, but the existing logic should work for most cases.

Modified Full Code #

JavaScript

$(document).ready(function() {
  var counter = 0;
  // Start cycling through images
  setInterval(function() {
    if(counter == 9) {
      counter = 0;
    }
    changeImage(counter);
    counter++;
  }, 3000);
  // Start loading percentage counter
  loading();
});

function changeImage(counter) {
  // Replace these paths with your actual custom image locations
  var images = [
    '<img src="custom-img-1.png" alt="Loader image 1">',
    '<img src="custom-img-2.png" alt="Loader image 2">',
    '<img src="custom-img-3.png" alt="Loader image 3">',
    '<img src="custom-img-4.png" alt="Loader image 4">',
    '<img src="custom-img-5.png" alt="Loader image 5">',
    '<img src="custom-img-6.png" alt="Loader image 6">',
    '<img src="custom-img-7.png" alt="Loader image 7">',
    '<img src="custom-img-8.png" alt="Loader image 8">',
    '<img src="custom-img-9.png" alt="Loader image 9">'
  ];
  $(".loader .image").html(""+ images[counter] +"");
}

function loading(){
  var num = 0;
  for(i=0; i<=100; i++) {
    setTimeout(function() {
      $('.loader span').html(num+'%');
      if(num == 100) {
        loading();
      }
      num++;
    },i*120);
  };
}

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
html,body {
  margin: 0;
  padding: 0;
  font-family:'Lato', sans-serif;
}
.loader {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.loader .image {
  width: 100px; /* Match this to your image's width */
  height: 100px; /* Match this to your image's height */
  text-align: center;
  transform-origin: bottom center; /* Keeps rotation anchored correctly */
  animation: 3s rotate infinite;
  opacity: 0;
}
.loader .image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Prevents image stretching/squashing */
}
.loader span {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
@keyframes rotate{
  0% {
    transform: rotate(90deg);
  }
  10% {
    opacity: 0;
  }
  35% {
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
  }
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="loader">
  <div class="image">
    <!-- Default initial image (will be replaced by the script) -->
    <img src="custom-img-1.png" alt="Default loader image">
  </div>
  <span></span>
</div>

Quick Notes #

• Double-check your image paths: if images are in a subfolder like assets/loaders/, update the src values to match (e.g., src="assets/loaders/custom-img-1.png").
• Adjust the .loader .image width/height to match your images' actual dimensions for the best display.
• If you still want to keep some FontAwesome icons alongside custom images, just mix <i> and <img> tags in the images array.

内容的提问来源于stack exchange，提问作者Evelyn