Moje ustalone tło sprawiało, że przewijanie witryny było bardzo powolne, co mogę zrobić, aby ją poprawić?

zmieniłem tło mojego forum dyskusyjne za pomocą CSS poniżejMoje ustalone tło sprawiało, że przewijanie witryny było bardzo powolne, co mogę zrobić, aby ją poprawić?

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; 
}

Obraz jest 1600x711 i 88K. Przewijanie stron jest teraz bardzo powolne. Czy problem CSS lub obraz powinien być w jakiś sposób mniejszy?

Edit: Próbowałem zmieniających się:

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; 
}

ale wciąż jest bardzo powolny na przewijanie.

Źródło

2011-08-11 Emerson

Używam chrome, ale próbowałem również z firefox. – Emerson

Nie powolne i laggy dla mnie (Chrome 13) –

Mam trochę opóźnienia w Chrome 13, a jego przyczyną jest dużo użycia procesora podczas przewijania. Czy problem zniknie po usunięciu obrazu tła? –

Problem znika po usunięciu właściwości background-size. Myślę, że to skalowanie dużego obrazu było przyczyną problemu. Jeśli to nie zadziała, po prostu całkowicie usuń obraz tła. Jednak nigdy wcześniej nie słyszałem o dużym obrazie tła powodującym opóźnienie.

Źródło

2011-08-12 01:31:54

Właściwość 'rozmiar tła 'z pewnością wywiera wpływ, ale witryna wciąż wydaje się przewijać powoli, gdy jest wyłączona. Powiedziałbym, że jest to 100% poprawa, ale wciąż jest problem. – STW

@STW: Co się stanie, jeśli całkowicie usuniesz obraz? –

Usunięcie obrazu powoduje całkowite rozwiązanie problemu, niezależnie od tego, czy włączono lub wyłączono opcję "background-size". Jednak wydaje się, że nie robi to zbyt wiele dla pytania OP ;-) – STW

miałem ten sam problem i rozwiązać go za pomocą tego jQuery plugin: http://srobbin.com/jquery-plugins/jquery-backstretch/

Nie używa żadnych właściwości CSS3, ale to działa dobrze i nie ma żadnego problemu z wydajnością 13 na Chrome lub Firefox 6.

Źródło

2011-08-31 16:31:33 kossdav

Rozwiązałem mój problem. – Kirk

Tak, uwielbiam nie blokować renderowania mojej strony za pomocą css i tła. +1 i dzięki! – eduncan911

zmęczony jQuery już – Muhaimin

Pomyślałem, że po prostu przyczynię się tutaj. Zamiast używać załączników tła: naprawione; use: before i position: fixed; problem posortowany. Wpadłem na ten sam problem.

Czytaj więcej tutaj: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

Źródło

2016-04-14 17:02:42 user2810762

Niesamowite rozwiązanie. bez jquery, po prostu czysty css3! – TetraDev

To nie działa z wieloma elementami przy użyciu załącznika tła – Aljaz

To jest dla mnie pierwszy wynik Google i zadziałało idealnie. To powinna być zaakceptowana odpowiedź. –

Ponadto, stosując następujące styl do znacznika html poprawia klatek znacząco w przeglądarkach WebKit, Chrome obejmowały:

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

ta działa we wszystkich przypadkach (duża) zdjęcia w tle i przewijane przewijanie, o ile wiem.

Źródło

2017-01-23 14:32:44 TNF

Kompresowanie obrazu (zmniejszanie rozmiaru), rozwiązany problem, bardzo polecam korzystanie z narzędzia takiego jak Radical Image Optimization Tool (RIOT), bardzo skuteczne i łatwe.

W systemie Linux można to zrobić za pomocą GIMP, można także usunąć metadane obrazu, aby zmniejszyć jego rozmiar, użyj narzędzia takiego jak exiftool.

Źródło

2017-07-09 06:41:30 ExillustX

Problem polega w rzeczywistości na stałej wartości tła, jeśli zmienisz ją na załącznik w tle: przewiń na urządzenia mobilne, aby naprawić opóźnienie.

Źródło

2018-02-19 18:04:03 WPExplorer

Moje ustalone tło sprawiało, że przewijanie witryny było bardzo powolne, co mogę zrobić, aby ją poprawić?

Odpowiedz

Powiązane problemy