Question

レンダリングでパフォーマンスの遅延がありますwindow.navigate(strURL);。それまではmainContainer.innerHTML = HTMLwait;を使用して待機メッセージを表示したいのですが、動作していません。どんな助けもありがとうございます。ありがとう！

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>"; 

var strURL = window.location.href; 

var mainContainer = $(".mainContainer"); 
if (mainContainer != null) { 
    mainContainer.innerHTML = HTMLwait; 
} 

window.navigate(strURL); 

Answer 1

のjQueryオブジェクトが.html()を使用するために、

$('.mainContainer').html(HTMLwait); 

あなたが.innerHTMLプロパティを使用したい場合：

document.querySelector('.mainContainer').innerHTML = HTMLwait; 

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>"; 
 

 

 
showMessage(HTMLwait); 
 

 
function showMessage(message) { 
 

 
    $('.mainContainer').html(HTMLwait); 
 

 
    setTimeout(function() { 
 
    console.log('time to reload the page'); 
 
    // uncomment line below 
 
    // window.location.reload(); 
 
    }, 1000); // executed after one second 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainContainer"></div>

Answer 2

mainContainer jQueryオブジェクトであるため、innerHTML性質を持っていません。 jQueryで選択した要素のHTMLを設定するには、html()を使います。

jQueryオブジェクトは決してnullにならないことに注意してください。存在するかどうかを確認するには、lengthプロパティを使用します。 Elementを保持していないjQueryオブジェクトに対してメソッドを呼び出すときにjQueryがエラーをスローしないので、要素が存在するかどうかのチェックは冗長ですが、注意する必要があります。

また、window.location.hrefを使用してページをリロードしているようです。はるかに簡単な方法は、単にwindow.location.reload()を使用することです。これを試してみてください、と述べているすべてで

：

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>"; 
var mainContainer = $(".mainContainer").html(HTMLwait); 
window.location.reload(); 

最後に、インラインスタイリングの多くはあなたがDOMに追加しているHTML文字列でもあります。あなたは本当にインラインスタイルを避けるべきです。代わりに、追加する要素にクラスを配置し、外部スタイルシートを使用してスタイルを設定します。