Question

我预装图像并将图像设置为display: none。在Firefox的devtools中，我可以看到正在预加载的图像。

在动画菜单上进行鼠标悬停时（包含日期时间步长），将显示第一张图像（设置为display: table-cell）。移动到第二张图像，第一张图像设置为display: none，而第二张图像现在具有display: table-cell。在firefox中，我看到图像闪烁（devtools显示未加载图像，因此似乎是从缓存中检索图像。这也是我的意图）。

重点是闪烁仅在首次加载时发生，并且仅在Firefox中发生。在Chrome中，图像之间的过渡（=切换css显示值）非常平滑。

IMGarray = [1, 2];
TimeArray = [201907160900, 201907160915, 201907160920, 201907160925];

function onImgLoad(selector, callback) {
  $(selector).each(function() {
    if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
      callback.apply(this);
    } else {
      $(this).on('load', function() {
        callback.apply(this);
      });

      // Change the image to a missing image
      $(this).on('error', function() {
        $(this).attr('src', '../img/notavailable.png');
      });
    }
  });
}

$.each(TimeArray, function(TSkey, TSvalue) {
  $.each(IMGarray, function(IMGkey, IMGvalue) {
    $('<img />')
      .attr('id', 'img-' + IMGvalue + '-' + TSkey)
      .attr('src', IMGsrc[IMGvalue][TSvalue])
      .css({
        'position': 'relative',
        'background': 'url("../img/loadingnow.gif") no-repeat 50% 50%',
        'display': 'none'
      })
      .appendTo('div#img-' + IMGvalue);

    onImgLoad('img#img-' + IMGvalue + '-' + TSkey, function() {
      $(this).css('background', 'none');
    });
  });
});

// SHOW IMAGE. on mouseover do hiliteCell(cellNR):
function hiliteCell(cellNR) {
  $.each(IMGarray, function(key, value) {
    $('img#img-' + value + '-' + activeCell).css({
      'display': 'none' // hide (previous) active image(s)
    });
  });

  $.each(IMGarray, function(IMGkey, IMGvalue) {
    $('img#img-' + IMGvalue + '-' + cellNR).css({
      'display': 'table-cell'
    })
  });

  activeCell = cellNR;
}

我尝试实现this solution，但这没有帮助。

有什么建议吗？

Firefox图像过渡首次闪烁

0 个答案: