Question

当前，我在firefox中的代码有问题。我已经创建了这个div滑块。但是，它仅滞后于Firefox，并在几秒钟后自动校正图像，而在chrome和safari中则可以正常工作。我正在做的是将10个div并排居中，仅显示9个。在左侧按钮上，我将在右侧显示隐藏的元素，并将该元素一直隐藏到最左侧。在右键上单击“我相反”。这是一个带有图像的例子。

正常：

[1] [2] [3] [4] [5] [6] [7] [8] [9]

左键单击：

[2] [3] [4] [5] [6] [7] [8] [9] [10]

右键单击：

[10] [1] [2] [3] [4] [5] [6] [7] [8]

这是我制作的工作代码笔示例，请在chrome中打开，然后在Firefox中进行比较。我将图像链接设置为在线链接，但通常我使用的是200kbs大小的本地图像。

Codepen

这是单击鼠标左键（代码中）

function leftClick() {
  var images = $(".my-image");
  //start switching
  $('#image-1').attr('id' , 'image-10');
  $('#image-2').attr('id' , 'image-1');
  $('#image-3').attr('id' , 'image-2');
  $('#image-4').attr('id' , 'image-3');
  $('#image-5').attr('id' , 'image-4');
  $('#image-6').attr('id' , 'image-5');
  $('#image-7').attr('id' , 'image-6');
  $('#image-8').attr('id' , 'image-7');
  $('#image-9').attr('id' , 'image-8');
  $('#image-10').attr('id' , 'image-9');
  //show 1-9 while hiding 10
  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";
}

Firefox中图像加载缓慢

0 个答案: