Question

所以我为客户网站编写了一个jQuery幻灯片：http://dang-demo.squarespace.com如果您使用谷歌浏览器浏览网站，那么在尝试向下滚动时会发现极端滞后。 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>');
  }

}

HTML：

<div id="intro">
  <div class="intro-bg-1"></div>
  <div class="intro-bg-2"></div>
  <div class="intro-bg-3"></div>
</div>

<div class="dot-navigation">
  <div class="dot-controls"></div>
</div>

CSS：

#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;
}

Answer 1

似乎box-shadow是罪魁祸首。

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

如果使用方框阴影在图像上方创建一个div，只需淡化没有阴影的图像。

一旦你开始使用元素上的复杂阴影制作动画，Chrome就不会喜欢它了。

谷歌Chrome极限延迟幻灯片放映

1 个答案: