Jquery 谷歌Chrome极差幻灯片

因此，我为一个客户网站编写了一个jQuery幻灯片：如果你使用谷歌浏览器浏览网站，你会在尝试向下滚动时注意到极度滞后。jQuery的衰落效应是非常不稳定的，等等。我一生都不明白为什么会出现这种滞后。如果有人能帮上忙，那就太棒了

仅供参考此幻灯片中的每张照片小于300KB

代码如下：

fade()

function fade(){

  $('#intro div:not(:first)').hide();

  var index = 1;
  var maxindex = $('#intro > div').length;

  setInterval(function(){

    $('#intro > div:first').fadeTo(2500, 0).next().fadeTo(2500, 1).end().appendTo('#intro');

    $('.dot-controls span').removeClass('active');
    $('.dot-controls span:eq(' + index + ')').addClass('active');
    index = index < maxindex - 1 ? index + 1 : 0;

  }, 5000);

  for (var i = 0; i < maxindex; i++) {
    $('.dot-controls').append('<span class="' + (i == 0 ? 'active' : '') + '">&middot;</span>');
  }

}

看来盒子阴影是罪魁祸首

box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset;

如果在图像上方创建一个带有框阴影的div，只需淡入没有阴影的图像即可

一旦开始在元素上使用复杂阴影设置动画，Chrome musn就不喜欢它

#intro {
  background-color:#21201E;
  background-position:initial initial;
  background-repeat:initial initial;
  height:100%;
  left:0;
  min-height:400px;
  position:fixed;
  top:0;
  width:100%;
}

.fade {
  display: none;
}

#intro .intro-bg-1 {
  background-image:url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db1e4b0a5091d77c593/1418612145483/one.jpg);
  background-position:50% 50%;
  background-repeat:initial initial;
  background-size:cover;
  border:none;
  bottom:0;
  box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset;
  left:0;
  position:absolute;
  right:0;
  top:0;
}

#intro .intro-bg-2 {
  background-image:url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db3e4b0a5091d77c598/1418612147944/two.jpg);
  background-position:50% 50%;
  background-repeat:initial initial;
  background-size:cover;
  border:none;
  bottom:0;
  box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset;
  left:0;
  position:absolute;
  right:0;
  top:0;
}

#intro .intro-bg-3 {
  background-image: url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db6e4b0a5091d77c5ad/1418612150110/three.jpg);
  background-position: 50% 50%;
  background-repeat:initial initial;
  background-size: cover;
  border: none;
  bottom: 0;
  box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset;
  left:0;
  position:absolute;
  right:0;
  top:0;
}

box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset;