2

リンクをクリックした後、画像を含む 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は空です）

ページに直接追加してテストしたところ、うまく機能しましたが、残念ながら探しているものではありません。

これが私のcssクラスです：

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

何が問題を引き起こしているのかわかりません。誰でもアイデアを得ましたか？;/

4

2 に答える 2

1

正直なところ、Chromeが台無しになることがあります。Chromeと背景画像に問題がありましたが、それは私のコンピューターだけでした。別のコンピューターのChromeブラウザーで試してみてください。同じではない可能性があります。

私が提案するもう1つのことは、divを追加するのではなく、すでにコーディングしておくことです。したがって、基本的にはhtmlコード上に配置し、見えない場所に配置します。必要に応じて、適切な位置に移動します。

于 2012-05-11T14:46:47.117 に答える
1

それは背景の位置でした。また、ボディに取り付けられた z-index が増加し、他の非表示の理由が防止されました。

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>");
}
于 2012-05-10T06:55:51.817 に答える