SEO Сообщество: Спрашивайте и помогайте

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

Q&A SEO

Зафиксированное фоновое изображение

btiz btiz  
2
  25.10.2012 10:14       3 325    
Здравствуйте.
Есть фоновая фиксированная картинка реализованная таким образом:
#all {background:url(images/background.jpg) fixed no-repeat top center;}
Все отлично работает, но есть один большой недостаток: при скролинге, особенно а опере все жутко тормозить. Вопрос - как еще можно зафиксировать фон без глючного background-attachment:fixed. И интересно, зачем вообще этот fixed  нужен если так тормозит уже по-умолчанию?
Погуглив, отчасти решил проблему. Нашел один скрипт http://userscripts.org/scripts/review/54099. Правда он для блоков с position:fixed и при скролинге страницы прячет блок. Т. е проблема довольно распространена даже с небольшими блоками - http://userscripts.org/scripts/show/54099. Немного изменив код: с g_btnStyle.visibility = "hidden" на g_btnStyle.background-color = "#000", т. е. тупо добавив цвет бэкрагунда и, о чудо, в опере и ff пропали рывки и появилась плавность, хотя общая тормознутость осталась и загрузка ЦП, возможно даже увеличилась. Теперь вопрос, что вообще происходит? Неужели движки оперы и ff(в меньшей степени) так плохо оптимизированы, что гючат от обычной зафиксированной фоновой картинки? Хром отлично отображает в обоих случаях . Если уж без скрипта не обойтись, то прошу помочь добавить каких-нибудь красивостей, вроде затухания картинки, чтоб скрип делал что-нибудь полезное, а не тупо заливал цветом скрытый бэкграунд. Или возможно есть какие приемы, чтобы решить проблему.

Ответы на пост (19) Написать ответ
bande bande
70
25.10.2012 10:44
картинка большая по размеру? если очень большая, то приказать становиться в 0 0 и no-repeat. будет сплошное фоновое изображение.
0
bande bande
70
25.10.2012 10:49
я идиот. подумал, что речь не об этом. прошу прощения..
0
btiz btiz
2
25.10.2012 10:55
В том то и дело что большая: 1920х1080. Т. е. по сути это обоина которую нельзя повторить и которая полностью отображается на мониторах с разрешением 1920х1080. При меньших разрешениях с fixed она ,как и задумано, она астоматически обрезается но остается зафиксированной. Без fixed она перемешается с контентом, но если контент больше 1080(а так почти всегда) то появляется пустая полоса снизу. Может есть какой js, который работает аналогично background-attachment:fixed, но не тормозит в браузерах?
0
Heliax Heliax
80
25.10.2012 10:59
Можно ссыль на сайт?
0
btiz btiz
2
25.10.2012 11:16
Сайт на локалке. Там смотреть-то не на что. Как писал выше Div #all {background:url(images/background.jpg) fixed no-repeat top center;} внутри которого находятся дивы с контентом. Все.
0
btiz btiz
2
25.10.2012 11:18
Повторюсь, c fixed все отображается как надо, но притормаживает в некоторых браузерах. Есть ли альтернатива на js?
0
Heliax Heliax
80
25.10.2012 11:41
Скрипты тут не виноваты, скорее всего дело в рендеринге браузеров. Не исключаю такой момент (потому и попросил ссыль), что страница перегружена графикой с градиентами.
У меня была похожая ситуация: БГ на сайте был выполнен одной большой картинкой с плавным градиентом сверху вниз. При скроллинге наблюдались заметные притормозки (ступенчатые скачки). Поменял БГ и скроллинг заработал плавно.
0
Heliax Heliax
80
25.10.2012 11:43
Попробуйте экспериментальным путем выяснить слабое место и ликвидировать его.
0
btiz btiz
2
25.10.2012 11:53
Сейчас скриптов вообще нет. Я же говорю, проблема только в браузере (опера), а конкретно в его несовершенстве рендеринга страниц. Убираю fixed: фон перемещается вместе с контентом - летает во всех браузерах. Зато в том же хроме все прекрасно работает и с fixed. Про скрипты я спросил потому, что может есть какой ява-скрипт, который зафиксирует фоновою картинку, подобно свойству Css fixed, и который не будет тормозит браузер.
0
Heliax Heliax
80
25.10.2012 12:03
Если рендер глючит, то вы хоть CSS-ом закрепите картинку, хоть JS-том, хоть на клей посадите - тормоза все равно будут. :-)
0
Heliax Heliax
80
25.10.2012 12:10
Повторюсь: найдите слабое место и ликвидируйте его. Рендер в Опере вам все равно не уговорить работать нормально.
0
btiz btiz
2
25.10.2012 12:13
Нашел уже - это FIXED. Убираю его все летает.
Упрощенная структура сайта:




#all {background:url(images/background.jpg) fixed no-repeat top center; background-color:#fff;}
#content{width: 1200px;margin: 0 auto;}
}





Много контента




Т. е все элементарно просто и без извратов. Но в опре, чтоб ее притормаживает.
0
btiz btiz
2
25.10.2012 12:14
Мда. Дивы не отобразились. Печально
0
btiz btiz
2
25.10.2012 12:18
Упрощенная структура сайта #2:
http://srcboard.com/034v5a32
0
btiz btiz
2
25.10.2012 12:09
В первом посте писал, что при изменении вот этого скрипта http://userscripts.org/scripts/review/54099, чисто субъективно пропадают небольшие подвисания и появляется плавность. Вот и думаю, может есть какие специальные ява-скрипты для этого дела.
0
Heliax Heliax
80
25.10.2012 12:14
Лично я подобных решений не встречал, требуемой цели всегда добивался своими силами. Мой принцип прост как три копейки - если что-то не работает (или работает криво) хотя бы в одном из основных браузеров, то этот кусок кода переписывается по-другому вплоть до решения проблемы.
0
Heliax Heliax
80
25.10.2012 12:21
Лично я не сторонник подобной реализации БГ (опять таки из-за косяков с отображением/скроллингом). Как по мне: верхняя часть страницы – одна картинка, нижняя часть страницы – другая. Середина заполняется либо серийным изображением, либо заливается подходящим цветом. Если нужен пример, могу дать ссыль.
0
btiz btiz
2
25.10.2012 12:26
Я тоже не сторонник, но если такой БГ является неотъемлемой частью дизайна сайта, то я просто не вижу другой реализации.
0
Heliax Heliax
80
25.10.2012 12:28
Что же, в таком случае желаю вам удачного разрешения сложившейся ситуации.
0