Question

我正在尝试优化代码，以便可以快速有效地循环浏览初始页面上的图像。我在chrome和safari上看起来真的很流畅，但是当我在移动设备和Firefox上查看启动页面时，会浪费很多时间

找到一个演示

我很想听听您关于如何解决此问题的意见。这是相关代码：

var i = 0
var j = 0
var l = $('.se-pre-con > div').length - 2;
var $pre_con = $('.se-pre-con');
var $di_sum = $('.splash-image:last-child');
var $img_array = [];
for (t = 0; t < l; t++) {
  $img_array[t] = $('.splash-image-' + t);
}

function flashanimation() {

  if (i < l) {
    $img_array[i].addClass('flash');
    i++;
    flashloop();
  } else if (j != 1) {
    $di_sum.addClass('di-some');
    j = 1
    flashloop();
  } else {
    $pre_con.addClass('nun');
  }
}

function flashloop() {
  setTimeout(function() {
    flashanimation();
  }, 300)
}

$(".blinker").removeClass("blinker");
flashloop();

基本上，目标是使图像出现150毫秒，然后消失150毫秒，然后出现下一个图像，依此类推，最后以黑色div结尾。现在我要向每个div添加一个类，以触发此关键帧动画〜

.splash-image.flash {
    -webkit-animation:flash 0.15s linear;
            animation:flash 0.15s linear;
    -webkit-animation-delay:0.15s;
            animation-delay:0.15s;
    display:block;
    opacity:0;
}
@-webkit-keyframes flash {
    0% {
        opacity:0;
    }
    1% {
        opacity: 1;
    }

    100% {
        opacity:1;
    }
}
@keyframes flash {
    0% {
        opacity:0;
    }
    1% {
        opacity: 1;
    }

    100% {
        opacity:1;
    }
}

我很想听听您的意见。感谢您审核我的问题

SetTimeout在Firefox中的调用之间滞后

0 个答案: