javascript - 使用 JavaScript 使用图像和文本更新页面后，iPad 上 Chrome 中的网站闪烁/闪烁/闪烁

Question

在我们使用 JavaScript 向页面添加图像或文本后，我们的网页在 iPad 上闪烁。我们尝试了 -webkit-backface-visibility:hidden; 的各种组合； -webkit-transform-style:preserve-3d; -webkit-transform:translate3d(0,0,0) 针对不同的元素。由于我们平铺了背景图像，因此我们无法将这些样式应用于正文，但可以将它们应用于所有 DIV，这有助于解决问题，但并不能解决问题。

问题在这里触发:

$( screenshots ).each( function() {
    var img = $( document.createElement('img') );

    // Set image source
    img.attr( 'src', this );

    // Append new screenshot
    screenshots_box.append( img );
});

// Render description
$( page ).find( '.desc' ).html( data.description.replace(/\n/g, '<br/>') );
$( page ).find( '.desc' ).removeClass( 'loading' );

如果我们注释掉更新 DOM 的行，闪烁就会消失。

重现:

1) 在您的平板电脑上，使用 Chrome 或 Safari，访问 http://www.tekiki.com/itunes-store/apps/free-apps/app/a-wheel-of-wopple-free-formerly-boggle-nytimes-fortune?itunes-store-id=481584214 .

2) 页面最初会加载，但在我们使用 iTunes 中的数据动态更新页面后，页面的某些部分会暂时闪烁/闪烁/闪烁。

Answer 1

我不确定这是否能解决您的问题，但您当然可以对图像加载进行大量优化。

首先，您可以将所有节点加载到一个文档片段，然后仅将文档片段附加到真实的 DOM。

其次，您可以使用 load 事件等待图像加载。

下面，我结合了这两种方法，所以下面的代码会将图像加载到文档片段中，并在加载最后一个图像时，将文档片段附加到 dom。

// First, let's create a document fragment for the nodes
var docfrag = document.createDocumentFragment();

// Then count the screenshots
var total = screenshots.length;

// Loop through all image sources
$(screenshots).each(function(){
    // Create the img node with jquery, note that how you can pass
    // all attributes to the node with a second parameter object
    // Plus let's hook the image's load event
    // Append the created img node immediately to the document fragment
    docfrag.appendChild($("<img />", {
        "src" : this
    }).on("load", function(){
        // we decrease the total variable, and if it reached zero( all images loaded )
        // we attach the document fragment to the screenshot box
        // ( I assume screenshots_box is a jquery object, so I need the first element of it )
        if(!--total){
            screenshots_box[0].appendChild(docfrag);
        }
    })[0]);
});

另请注意，网页世界中最慢的事情是重新呈现，例如。如果您操作 dom，那么您需要将对 dom 的编辑量缩小到最低限度。