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

这是背景位置;也增加了附着在身体上的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>");
}

Answer 2

老实说，有时Chrome会搞砸。我遇到过Chrome和背景图片的问题，但它只是我的电脑。在不同的计算机Chrome浏览器上试用，可能不一样。

我建议的另一件事是，你的div已经编码而不是附加它。因此，基本上将它放在html代码上并将其置于视线之外，然后在需要时将其移动到正确的位置。

在Chrome中添加带有图片的div

2 个答案: