Chromeで画像付きのdivを追加する

Question

リンクをクリックした後、画像を含むdivを画像に追加する際に問題が発生します。 これは私のスクリプトです。これはdocument.ready（）でイベントを追加します。

var handler = function() { 
    $('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>"); 
    //$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content"); 
} 

$(document).ready(function() { 
    for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) { 

     if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") { 
      ls[i].onclick = handler; 
     } 
    } 
}) 

ここで問題となるのは、FirefoxとIEで動作しているChromeでは機能しません。いくつかの掘り出した後、私はそれが実際にdivを追加するが、画像を表示しないことが分かった。 （ページの先頭にdivを追加してテストしたところ、すべてが下に移動しdivが空です）

私はそれをページに直接追加してテストしましたが、それはうまく動作しますが、それは私が探しているものではありません残念ながら。

.loading-graphic 
{ 
    background: url('~/Content/ico/loading_big.gif') no-repeat; 
} 

が問題を引き起こしているものは考えを得なかっ：

は、ここに私のCSSクラスです。誰でもアイデアがありますか？ ;/

Answer 1

正直なところ、クロムがねじ込まれることがあります。 Chromeと背景画像に問題がありましたが、それは自分のパソコンだけでした。別のコンピュータのChromeブラウザで試してみてください。同じではないかもしれません。

私が示唆しているもう1つのことは、divを追加する代わりに既にコード化していることです。だから、基本的にそれをHTMLコード上に置いて、それを視野から外し、必要なときに正しい位置に移動させてください。

Answer 2

背景の位置です。身体に取り付けられたz-指数も増加し、他の不可視の理由が防止された。

var handler = function() { 
    $('body').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:50%;left:50%;margin:-100px 0 0 -100px;z-index:99999;background-position:center center;display:block !important;\"></div>"); 
}