ブラウザでDOM要素を直ちに再描画するようにします

Question

しばらく時間がかかるDOM要素に巨大なHTMLマークアップを挿入する必要があります。プリローダー・インジケーターを表示したいのです。 #preloaderと#containerの2つのブロックがあります。コードによっては、プリローダーが最初に表示され、大きなhtmlマークアップが貼り付けられます。

ブラウザがhtmlマークアップのレンダリングを終了しない限り、プレローダーは実際に表示されませんでした。私は多くのソリューションを試しましたが（多くはhereと記載されています）、まだ成功していません。

例を以下に有りです： https://jsfiddle.net/f9f5atzu/

<div id='preloader'>Preloader...</div> 
<div id='container'>Container...</div> 

#preloader { 
    display: none; 
    background-color: #f00; 
    color: #fff; 
    hight: 100px; 
    text-align: center; 
    padding: 10px 20px; 
} 

#container { 
    background-color: #ccc; 
} 


setTimeout(function() { 
    // Define variables 
    let domPreloader = document.getElementById('preloader'); 
    let domContainer = document.getElementById('container'); 
    const html = Array(100000).fill("<div>1</div>"); 

    // Display preloader 
    domPreloader.style.display = 'hide'; 
    domPreloader.offsetHeight; 
    domPreloader.style.webkitTransform = 'scale(1)'; 
    domPreloader.style.display = 'block'; 

    // Render a big html 
    domContainer.innerHTML = html; 
}, 1000); 

は、問題の任意の解決策はありますか？

Answer 1

あなたのやり方では、プリローダーの表示と「ビッグhtml」の表示の間でブラウザーに制御を解放していません。

このブロック全体をsetTimeout()にカプセル化するのではなく、レンダリング部分を変えるだけです。

これらの線に沿って何かをしてみてください：

// Define variables 
let domPreloader = document.getElementById('preloader'); 
let domContainer = document.getElementById('container'); 

// Display preloader 
domPreloader.style.webkitTransform = 'scale(1)'; 
domPreloader.style.display = 'block'; 

// Render a big html 
setTimeout(render, 100); 

function render() { 
    const html = Array(100000).fill("<div>1</div>"); 
    domContainer.innerHTML = html; 

    // Hide preloader 
    domPreloader.style.display = 'none'; 
} 

JSFiddle