Question

我创建了在单击按钮时在后台更新图像时从左向右或从右向左滚动的div。我的编程不是很好（丑陋的代码），但是它在chrome或safari上完全没有滞后，但是一旦我将其加载到Firefox上，图像重新加载就非常慢，并且div开始变得失真。我已经给出了带有图像链接的示例，但最初我使用的是多个本地图像，这些图像在后台切换时只有200kb（我未包括切换图像代码）。（请查看代码笔，然后在Firefox和chrome之间切换，按一下按钮应该可以看到它们之间的差异。我在Mac电脑上。

function leftClick() {
  var images = $(".my-image");
  images.eq(0).insertAfter(images.eq(images.length - 1));
  var numberx = 1;
  var number1 = "1";
  var number2x = numberx + 1;
  var number2 = number2x.toString(); //2
  var number3x = number2x + 1;
  var number3 = number3x.toString(); //3
  var number4x = number3x + 1;
  var number4 = number4x.toString(); //4
  var number5x = number4x + 1;
  var number5 = number5x.toString(); //5
  var number6x = number5x + 1;
  var number6 = number6x.toString(); //6
  var number7x = number6x + 1;
  var number7 = number7x.toString(); //7
  var number8x = number7x + 1;
  var number8 = number8x.toString(); //8
  var number9x = number8x + 1;
  var number9 = number9x.toString(); //9
  var number10x = number9x + 1;
  var number10 = number10x.toString(); //10
  $("#image-" + number1).attr("id", "image-" + number10); //1-->10
  $("#image-" + number2).attr("id", "image-" + number1); //1-->2
  $("#image-" + number3).attr("id", "image-" + number2); //3-->2
  $("#image-" + number4).attr("id", "image-" + number3); //4-->3
  $("#image-" + number5).attr("id", "image-" + number4); //5-->4
  $("#image-" + number6).attr("id", "image-" + number5); //6-->5
  $("#image-" + number7).attr("id", "image-" + number6); //7-->6
  $("#image-" + number8).attr("id", "image-" + number7); //8-->7
  $("#image-" + number9).attr("id", "image-" + number8); //9-->10
  $("#image-" + number10).attr("id", "image-" + number9); //10-->9*/

  var refreshedImages = $(".my-image");
  for (var i = 1; i < refreshedImages.length; i++) {
    var intValue = i.toString();
    var turnOnImage = document.getElementById("image-" + intValue);
    turnOnImage.style.display = "block";
  }
  var turnOffImage = document.getElementById("image-" + "10");
  turnOffImage.style.display = "none";
}

我的Codepen

Codepen

要添加的注意事项：如果我将鼠标悬停在firefox中的图像上方，它将修复该图像，但这确实很不方便。

在Firefox中滞后的背景div图像

0 个答案: