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

Website flickering/flashing/blinking in Chrome on iPads after using JavaScript to update page with images and text

本文关键字：闪烁 Chrome 上的 浏览器 iPad 网站 图像 JavaScript 文本 更新 使用      更新时间：2023-09-26

使用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-商店id=481584214。

2） 页面最初会加载，但在我们使用iTunes中的数据动态更新页面后，页面的部分会瞬间闪烁。

我不知道这是否能解决你的问题，但你肯定可以对图像负载进行大规模优化。

首先，您可以将所有节点加载到文档片段中，然后只将文档片段附加到真正的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的数量缩小到最小。

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

不如你把img的显示设置为无，看看闪烁是否停止：

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

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

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

将其添加到<html>标记之前，并查看结果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
相关文章：