在 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;
        }
    }
})

这里的问题是它在 Chrome 中无法运行，而在 Firefox 和 IE 中却可以完美运行。经过一番挖掘，我发现它实际上添加了 div 但没有显示图像。 （通过在页面开头添加div进行测试，一切都向下移动并且div为空）

我已经对其进行了测试，也将其直接添加到页面中，然后效果很好，但不幸的是，这不是我想要的。

这是我的 css 类：

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

不知道是什么导致了问题。有人有想法吗？ ;/

Answer 1

老实说，Chrome 有时会搞砸。我在使用 Chrome 和背景图片时遇到了问题，但这只是我的电脑。换个电脑Chrome浏览器试试，可能不一样。

我建议的另一件事是，让您的 div 已经编码而不是附加它。所以基本上把它放在html代码上，放在看不见的地方，然后当你需要它的时候，把它移到正确的位置。

Answer 2

这是背景位置；还增加了 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>");
}