0

我有一个名为 imageContainer 的 div。imageContainer 包含一个 img，我将一个包含 256 个带有背景图像的子 div 的 div 附加到 imageContainer，然后删除该 img。我这样做是这样的：

  $imageContainer.append($container);
  $imgCurrent.hide();

我遇到了一个问题，在 Chrome 中，div 会闪烁一秒钟，您可以看到 imageContainer 后面的内容。如果我将代码更改为以下代码，则它可以在没有闪烁的情况下工作：

  $imageContainer.append($container);
  setTimeout(function () {
      $imgCurrent.hide();
  }, 100); // 50ms still flickers

我认为可能发生的是 div 被附加，img 被删除，然后子 div 被渲染。唯一的事情是这一切都发生得太快而无法查看/调试。我确实认为子 div 出现了，但背景图像的渲染速度不够快。但是我尝试将每个子 div 的背景颜色设置为红色，但仍然只看到后面的内容而不是看到任何红色。

我唯一的结论是 Chrome 需要一段时间才能将 div 添加到页面中，有没有办法检查这一点？我不想只使用 setTimeout，我可以使用.ready()or .load()（不确定是否load()适用于背景图像，对吗？）

谢谢，

乔

PS 显示的图像在浏览器缓存中，因此在实际获取它们时没有延迟。

编辑：观察突变的新代码 - 仍然不起作用

 function transition(duration, callback) {
    var runWhenReady = function () {
        $imgCurrent.hide();

        var transitionName;
        if (_args.randomTransition) {
            if (transitionIndex % _args.transitions.length == 0) {
                shuffledTransitions = shuffle(_args.transitions);
            }
            transitionName = shuffledTransitions[transitionIndex % _args.transitions.length];
        } else {
            transitionName = _args.transitions[transitionIndex % _args.transitions.length];
        }
        transitionIndex++;

        runTransition(transitionName, $grid, x, y, duration, function () {
            var waitForAnimationToEnd = setInterval(function () {
                // Although the set interval timer used in the trasition  has finished there may still be animations running
                if (!$grid.children().is(':animated')) {
                    $grid.remove();
                    callback();
                    clearInterval(waitForAnimationToEnd);
                }
            }, 20);
        });
    };

    // The more cells we have the better it looks but it lags in ff/ie
    var x = 16;
    var y = 16;

    var $grid = $('<div />');
    $imageContainer.append($grid);

    // If the browser supports it then wait for the dom elements to load if not then just wait a while
    if (typeof (MutationObserver) == 'undefined') {
        setTimeout(runWhenReady, 200);
    } else {
        //TODO: Not sure if this works yet - if not then just use the code above
        $grid.data('mutations', 0);
        var observer = new MutationObserver(function (mutations) {
            // In Chrome I get all of the mutations at once but in some browsers / scenarios there may be multiple calls to this function so we maintain a counter
            $grid.data('mutations', parseInt($grid.data('mutations')) + mutations.length);
            if (parseInt($grid.data('mutations')) >= x * y) {
                observer.disconnect();
                runWhenReady();
            }
        });
        var config = { attributes: false, childList: true, characterData: false };
        observer.observe($grid[0], config);
    }

    currentImageToGrid($grid, x, y);
}
4

2 回答 2

1

Mutation Observers（此处的文档：https ://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ）可用于检测何时从 dom 添加（或删除）元素

于 2013-05-30T22:03:52.963 回答
0

尝试这个：$imageContainer.append($container).delay(50).hide();

于 2013-05-30T22:01:59.977 回答