Question

http://schnell.dreamhosters.com/randroll.php

每当你点击'Roll！'时，会出现一个gif，停留一会儿，然后消失。它完全按照预期的方式工作，除非gif出现时它会移动它下面的所有东西然后当它消失时一切都会向后移动。有没有办法让这个gif进来，没有它移动这样的东西？而不使用像绝对定位这样的东西？

Answer 1

你将使用绝对定位将其从正常的元素流中移除，因此它不会出现这种行为。它是Job™的正确工具。

Answer 2

是的，你想使用绝对定位。这将使你大部分时间到处：

<img id="loader" style="position: absolute; display: none; left: 50%; margin-left: -110px;" src="img/ajax-loader.gif">

我建议避免使用内联CSS和JavaScript，以及像<center>这样的HTML元素（你应该使用CSS）。此特定元素的CSS规则为

#loader {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -110px; 
}

Answer 3

为什么不使用position：absolute？凭直觉，它应该感觉像是正常内容之上的东西。

解决方法可能是使用负边距。如果您的图像高40像素，则可以使用-40像素的边距底部。我不推荐这种策略而不是位置：绝对。

编辑：woops，有人打败了我。

Answer 4

摆脱<br>并将gif放入一个静态高度的容器中：

<button>Roll!</button>
<div style="height:20px"><img id="loader" src="img/ajax-loader.gif" /></div>

使用额外的CSS调整边距以便品尝。

Answer 5

你可以给gif一个负底边，等于它的高度。所以，假设它是30px高

#myGif {
    margin-bottom: -30px;
}

Answer 6

感谢您的帮助，但我设法找到了自己的解决方案，我认为它比我原来的想法更有效。你可以回到页面看看它的实际效果，但如果你很好奇，这就是我的所作所为。我基本上刚刚补充......

<style type="text/css">
    .load {
        background-image: url('img/ajax-loader2.gif');
        background-repeat: no-repeat;
        background-position: bottom right; 
    }

    #printout {
        border: 1px black dotted;
        font-size: 12pt;
        text-align: left;
        padding: 10px;
        height: 100px;
        width: 400px;
    }
</style>

然后......

$("button").click(function () {
            var v = $("select").attr("value");
            --> $("#printout").addClass("load"); <--
            $.get("randloot.php", { "table" : v }, function(data) {
                --> $("#printout").removeClass(); <--
                if(data.roll != 0) {    
                    $('#printout').text("Roll - " + data.roll +
                                        "\nArmor - " + data.armor +
                                        "\nPrice - " + data.price + "gp");
                }
                else
                    $('#printout').text("Oops");
            }, "json");
        });

我认为最终的结果是优雅而不引人注目的。可能比提到的其他一些解决方案多一些，但这可以应用于更多情况，只需要很少的调整。

如何让这个消失/再现的AJAX加载GIF停止移动其他元素？

6 个答案: