Создание разделов с большими фоновыми изображениями и плохой производительностью в Chrome

У меня есть одностраничный веб-сайт, и я добавил несколько разделов с большими фоновыми изображениями. Я хотел, чтобы они имели «фиксированный» эффект, чтобы при прокрутке пользователем они не двигались. Поэтому я использовал background-size: cover; и background-attachment: fixed. Это делает работу. Однако проблема в том, что в Chrome он очень тормозит, я думаю, что Chrome не кэширует изображения или что-то в этом роде. Вы можете протестировать его здесь:

http://jsfiddle.net/sallar/rwyfZ/1/

это не гладко, как другие браузеры. Поэтому я попытался использовать изображения (в данном случае с помощью $.backstretch). Используя этот метод, задержка прокрутки исправлена ​​и прокручивается очень плавно, но у нее нет «фиксированного» эффекта, которого я хотел. Поэтому я подумал, что должен использовать эффект параллакса. Но ни один из плагинов или методов параллакса, которые я пробовал, не справился с «изображениями», все они были оптимизированы для фонового изображения, которое я не могу использовать из-за этой проблемы в Chrome.

Вот демонстрация примера Backstretch:

http://jsfiddle.net/sallar/FX4Cn/1/

Итак, что мне сделать, чтобы они имели фиксированный стиль и чтобы страница прокручивалась плавно, как во втором примере?
Заранее спасибо.


person Sallar    schedule 13.12.2012    source источник
comment
Какой тип/размер файла(ов)?   -  person bobthyasian    schedule 13.12.2012
comment
@bobthyasian JPG, 800 ~ 1000 или 1100 по ширине. Вы можете увидеть их в приведенных выше URL-адресах.   -  person Sallar    schedule 13.12.2012
comment
К вашему сведению - я не замечаю большой разницы во времени в Chrome на моей машине с Win7.   -  person ScottS    schedule 13.12.2012
comment
Это не ответ, но это может помочь. Преобразование в PNG, файлы меньшего размера практически без потери качества. Когда дело доходит до Chrome, он очень мощный, но у него есть свои недостатки, например, он потребляет ресурсы.   -  person bobthyasian    schedule 13.12.2012
comment
Я не веб-дизайнер, но что вы подразумеваете под задержкой прокрутки, потому что я не видел никаких задержек при прокрутке вашего первого скрипача!   -  person Sadegh    schedule 13.12.2012


Ответы (1)


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

Я думаю, что ваша «проблема» заключается в том, что Chrome прокручивается поэтапно, чего нет в Firefox и Opera (я действительно не знаю о других банкоматах). В следующий раз вы можете попробовать погуглить что-то вроде «плавная прокрутка хрома», чтобы увидеть один из сотен вопросов и решений этой «проблемы».

Теоретически это возможно сделать с помощью Javascript, но я не могу найти какой-либо полезный/рабочий пример atm.

person b1nary    schedule 13.12.2012
comment
Спасибо, но есть большая разница, когда он работает в полном объеме. Я пытался искать с десяток раз. У всех есть эта проблема, и никто не может ее решить. - person Sallar; 13.12.2012
comment
Тогда все же я не вижу никакого отставания - person b1nary; 19.12.2012
comment
Саллар Каболи, у меня тоже такая проблема. Вы когда-нибудь находили ответ? - person elzi; 27.03.2013