Процессор Internet Explorer сильно загружается после отображения анимированного GIF-изображения - PullRequest
3 голосов
/ 15 июля 2011

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

Недавно я началснова развивался и обнаружил, что загрузка ЦП становится высокой после того, как анимированное GIF-изображение было отображено в качестве фонового изображения.

Я использую Ajax для обновления содержимого и применения классов CSS к элементам для отображения индикатора загрузки.Я удаляю класс CSS по окончании загрузки контента.Если я закомментирую классы в таблице стилей, которая содержит GIF-изображения, все выглядит нормально.

Я проверил это в Internet Explorer 7 и Internet Explorer 8.

Что можно сделать, чтобы это исключитьпроблема?

var blabla = function() {
    var element = $('id of element');
    element.addClassName('a css classname');

    new Ajax.Request({some parameters},
        onSuccess: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onFailure: function() {
            element.removeClassName('a CSS classname');
            ....
        },
        onComplete: function() {
            element.removeClassName('a CSS classname');
            ....
        }
    }
}

Ответы [ 3 ]

2 голосов
/ 24 июля 2011

Возможно, эта проблема связана с тем, как Internet Explorer загружает данные, необходимые из классов CSS. Могу предложить альтернативный подход: вместо использования анимации загрузки, содержащейся в классе CSS, просто поместите .gif в видимый тег <img> прямо в HTML. Затем, когда onSuccess или другой метод вызывается, вы можете просто запустить:

$("#ajax-gif").hide();
0 голосов
/ 24 июля 2011

Если эта проблема возникает только в Internet Explorer, это действительно проблема перерисовки, которая начинается с ответа Барнзи . Это должно создавать аналогичные проблемы в других браузерах.

Одним из решений будет использование обработчика событий JavaScript onload для предварительной загрузки всех ваших изображений GIF в DOM, что уменьшит необходимость перерисовки и прекратит эскалацию циклов ЦП.

Я согласен, что в 2011 году использование изображений GIF, вероятно, не лучший подход для веб-дизайна.

0 голосов
/ 20 июля 2011

Как уже отмечалось, похоже, что оно не имеет ничего общего с самим изображением GIF, особенно с размером 20x20 пикселей.

Если вы изменяете фон страницы с изображением в формате GIF, он должен перерисовать то, что поверх него, в определенной степени.

Чтобы снизить нагрузку на ЦП, либо уменьшите то, что находится на вашей странице, прежде чем сменить фон, либо прекратите использовать изображения GIF, это 2011 год!

...