it-swarm.com.ru

Мой фиксированный фон сделал прокрутку сайта очень медленной, что я могу сделать, чтобы улучшить ее?

Я изменил фон моего дискуссионного форума, используя CSS ниже

http://forum.antinovaordemmundial.com

html {
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-Origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Изображение 1600x711 и 88k. Прокрутка страниц теперь очень медленная. CSS проблематичен или изображение должно быть как-то меньше?

Правка: я пытался изменить на:

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-Origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

Но это все еще очень медленно при прокрутке.

15
Emerson

Проблема исчезает, когда я удаляю свойство background-size. Я думаю, что проблема была в масштабировании большого изображения. Если это не сработает, просто удалите фоновое изображение. Однако я никогда не слышал о большом фоновом изображении, вызывающем отставание.

8
John Stimac

У меня была та же проблема, и я решил ее с помощью этого плагина jQuery: http://srobbin.com/jquery-plugins/jquery-backstretch/

Он не использует никаких свойств CSS3, но работает нормально и не имеет проблем с производительностью в Chrome 13 или Firefox 6.

12
kossdav

Я думал, что просто внесу свой вклад здесь. Вместо использования background-attachment: исправлено; использование: до и положение: исправлено; проблема разобрана. Я столкнулся с этой же проблемой.

Подробнее читайте здесь: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

9
user2810762

Кроме того, применение следующего стиля к тегу html значительно повышает частоту кадров в браузерах WebKit, включая Chrome:

-webkit-transform: translate3d(0,0,0);

Насколько я могу судить, это работает во всех случаях с (большими) фоновыми фотографиями и прерывистой прокруткой.

0
TNF

На самом деле проблема заключается в фиксированном значении background-attachment, если вы измените его на background-attachment: прокрутка для мобильных устройств должна исправить отставание.

0
WPExplorer

Сжатие изображения (уменьшение размера), решение моей проблемы, я настоятельно рекомендую использовать такой инструмент, как Radical Image Optimization Tool (RIOT) , очень эффективный и простой.

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

0
ExillustX