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

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

15 голосов
/ 12 августа 2011

Я изменил фон моего дискуссионного форума, используя 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;
}

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

Ответы [ 6 ]

12 голосов
/ 31 августа 2011

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

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

9 голосов
/ 14 апреля 2016

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

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

8 голосов
/ 12 августа 2011

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

0 голосов
/ 19 февраля 2018

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

0 голосов
/ 09 июля 2017

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

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

0 голосов
/ 23 января 2017

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

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

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

...