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

css, html, ios, ipad, javascript

Solution

I don't know exactly if this will solve your problem, but you can certainly do massive optimization to the image loads.

First of all, you can load all nodes to a document fragment and later only append the document fragment to the real DOM.

Second, you can wait for images to load with the load event.

Below, I combined the two methods, so the below code will load images to a document fragment and when the last image is loaded, it appends the document fragment to the 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]);
});

Also please take note, that the slowest thing in the world of webpages is rerendering, eg. if you manipulate the dom, so you need to narrow down the amount you edit the dom to a minimum.

Problem

Original source