Как сделать так, чтобы это исчезающее / вновь появляющееся изображение загрузки GIF AJAX перестало перемещать другие элементы?

Question

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

Каждый раз, когда вы нажимаете «Roll!», Появляется gif, остается на некоторое время, а затем исчезает. Он работает точно так же, как и должен, за исключением того, что когда появляется gif, он перемещает все под ним, а затем, когда он исчезает, все возвращается назад. Есть ли способ заставить этот гиф приходить и уходить без движения, как это? И без использования чего-то вроде абсолютного позиционирования?

Answer 1

Почему бы вам не использовать позицию: абсолют? По интуиции это должно ощущаться как нечто поверх вашего обычного контента.

Обходной путь может заключаться в использовании отрицательной маржи. Если ваше изображение имеет высоту 40px, вы можете использовать нижнее поле -40px. Я бы не рекомендовал эту стратегию над позицией: абсолют.

РЕДАКТИРОВАТЬ: woops, кто-то избил меня до этого.

Answer 2

Да, вы хотите использовать абсолютное позиционирование.Это поможет вам в этом:

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

Я бы рекомендовал избегать использования встроенного CSS и JavaScript, а также таких HTML-элементов, как <center> (для этого вам следует использовать CSS).Правило CSS для этого конкретного элемента будет

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

Answer 3

Вы использовали бы абсолютное позиционирование, чтобы удалить его из обычного потока элементов, чтобы оно не демонстрировало это поведение. Это правильный инструмент для работы ™.

Answer 4

Спасибо за помощь, но мне удалось найти собственное решение, и я думаю, что оно работает даже лучше, чем моя оригинальная идея.Вы можете вернуться на страницу и увидеть ее в действии, но если вам интересно, вот что я сделал.Я просто добавил ...

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

И я думаю, что конечный результат элегантен и ненавязчив.Может быть, на несколько строк больше, чем в некоторых других упомянутых решениях, но это можно применить ко многим другим ситуациям с минимальной корректировкой.

Answer 5

Вы можете дать gif отрицательное нижнее поле, равное его высоте. Итак, предполагая, что это 30px максимум

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

Answer 6

Просто избавьтесь от <br> s и поместите gif в контейнер со статической высотой:

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

Используйте дополнительный CSS для настройки полей по вкусу.