您正在循环遍历图像，并在事件处理程序中使用 img 。 但是，外部范围中的这个变量 img 被每个循环覆盖，直到它完成对所有内容的循环，然后 img 停留在添加的最后一帧上。
然后，当事件处理程序触发时，它会在每个实例中添加最后一帧，因为那是当时 img 的值。在图像加载之前，循环已完成。

通过将其包装在函数中，将其添加到自己的 范围 中，变量得以保留。

我还修改了您的代码以将 DOM img 元素存储在数组中，因此您不需要昂贵的 DOM 查找，这会让您的代码更快一点。

我在代码中添加了注释来解释我的更改。

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
var imageGiF = "";
var total = 0;
let canvasWidth = 0;
let canvasHeight = 0;
$('div.gifimage img').each(function(idx, img_tag) {
  var total = 0;
  if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
    var rub = new SuperGif({
      gif: img_tag,
      progressbar_height: 0
    });
    rub.load(function() {
      // An array for the image references
      let images = [];
      // Keep the reference to save on expensive DOM lookups every iteration.
      let frames = $("#frames");
      for (let i = 0; i < rub.get_length(); i++) {
        total += 1;
        rub.move_to(i);
        // var canvas = cloneCanvas(rub.get_canvas());
        var canvas = rub.get_canvas().toDataURL("image/png");
        img = $('<img id = "gifframe' + i + '"src= "' + canvas + '" class="frameimages">');
        
        // Use the reference to append the image.
        frames.append(img);
        
        // Add image to images array with the current index as the array index.
        // Use the jQuery get method to get the actual DOM element.
        images[i] = img.get(0);
      }
      var frameimages = document.getElementById("frames").querySelectorAll(".frameimages");
      var totalimages = frameimages.length;

      x = 0;
      y = 0;
      
      // Loop through all the images in the image array
      // Using a scope so the reference to img won't be overridden.
      images.forEach((img, index) => {
        img.onload = () => {
          ctx.drawImage(img, index * 100, 0, 100, 100);
          total++;
          console.log(total);
        } 
      })
      
      
      totalwidth = (total) * 100;
      c.width = totalwidth;
      c.height = 100;
      setTimeout(() => {
        imageGiF = c.toDataURL("image/png");
        console.log(imageGiF);
        // addBgimg(imageGiF)
      }, 10);
    });
  }
});

#frames { display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div class="gifimage" id="placehere">
  <img src="https://media1.giphy.com/media/bzUwzbxcvJ3XQlcnoi/giphy.gif" alt="">

</div>
<div id="frames" class="classGIF"></div>
<canvas id='myCanvas' width="10000" height="300"></canvas>