Блог

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

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

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

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

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

РЕДАКТИРОВАТЬ: упс, кто-то меня опередил.

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

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

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

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

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

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

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

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

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

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