9

Our web page flickers on iPads after we add images or text to the page using JavaScript. We have tried various combinations of -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; -webkit-transform:translate3d(0,0,0) against different elements. Since we tile a background image, we can't apply these styles to the body but can apply them to all DIVs, which helps but doesn't remove the issue.

The issue gets triggered here:

$( 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' );

If we comment out the lines that update the DOM, the flickering vanishes.

To reproduce:

1) On your tablet, using Chrome or Safari, visit http://www.tekiki.com/itunes-store/apps/free-apps/app/a-wheel-of-wopple-free-formerly-boggle-nytimes-fortune?itunes-store-id=481584214.

2) The page will initially load, but after we dynamically update the page with data from iTunes, sections of the page will flicker/flash/blink momentarily.

4

5 回答 5

4

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

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

其次，您可以等待图像通过加载事件加载。

下面，我结合了这两种方法，所以下面的代码会将图像加载到文档片段中，当加载最后一个图像时，它会将文档片段附加到 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 的数量缩小到最低限度。

于 2013-07-17T07:36:15.367 回答
1

我的建议是，如果它正确加载图像然后闪烁，然后尝试使用一些优化技术，例如使用设置图像大小并缩小任何大型脚本，因为对我来说这听起来类似于加载时间问题，如果脚本和 css缩小页面将运行得更快，这可能会减少/消除闪烁。此外，Sammy 的解决方案可能会有所帮助。（如果是这样，他值得称赞，请忽略我）

于 2013-07-16T14:08:37.297 回答
1

也许您应该明确指定图像的大小以提高渲染性能并避免因缩放图像而闪烁。

于 2013-07-16T07:29:49.350 回答
1

我不确定这是否是一个解决方案，但这是一个建议：

您如何将 img 的显示设置为 none 并查看闪烁是否停止：

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

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

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

如果确实如此，那么在附加所有图像后显示它以阻止？

$('img').css('display', 'block'); or $('img').show()
于 2013-07-15T14:53:23.930 回答
0

<html>在标签之前添加这个并查看结果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
于 2013-07-20T21:41:08.093 回答