मेरी निश्चित पृष्ठभूमि ने साइट को बहुत धीमा कर दिया, मैं इसे सुधारने के लिए क्या कर सकता हूं?

मैंमेरी निश्चित पृष्ठभूमि ने साइट को बहुत धीमा कर दिया, मैं इसे सुधारने के लिए क्या कर सकता हूं?

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 है नीचे सीएसएस का उपयोग कर मेरी चर्चा मंच की पृष्ठभूमि बदल दिया है। पृष्ठों की स्क्रॉलिंग अब बहुत धीमी है। क्या सीएसएस समस्याग्रस्त है या छवि किसी भी तरह छोटी होनी चाहिए?

संपादित करें: मैं करने के लिए बदल रहा है की कोशिश की:

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

लेकिन यह अभी भी स्क्रॉल पर बहुत धीमी है।

स्रोत

2011-08-11 Emerson

मैं क्रोम का उपयोग कर रहा हूं, लेकिन मैंने फ़ायरफ़ॉक्स के साथ भी कोशिश की। – Emerson

मेरे लिए धीमा या लगी नहीं है (क्रोम 13) –

मुझे क्रोम 13 में कुछ अंतराल मिल रहा है, और स्क्रॉल करते समय इसका बहुत सी CPU उपयोग होता है। यदि आप पृष्ठभूमि छवि को हटाते हैं तो क्या समस्या दूर हो जाती है? –

जब मैं background-size संपत्ति को हटाता हूं तो समस्या मेरे लिए दूर हो जाती है। मुझे लगता है कि यह बड़ी छवि का स्केलिंग था जो समस्या पैदा कर रहा था। अगर यह काम नहीं करता है, तो बस पृष्ठभूमि छवि को पूरी तरह से हटा दें। हालांकि, मैंने कभी भी बड़ी पृष्ठभूमि छवि के बारे में कभी नहीं सुना है जिसके कारण पहले अंतराल होता है।

स्रोत

2011-08-12 01:31:54

'पृष्ठभूमि-आकार' संपत्ति निश्चित रूप से प्रभाव डाल रही है, लेकिन साइट अभी भी इसके साथ धीरे-धीरे स्क्रॉल करने लगती है। मैं कहूंगा कि यह 100% सुधार है, लेकिन अभी भी एक मुद्दा है। – STW

@STW: यदि आप पूरी तरह से छवि को हटाते हैं तो क्या होगा? –

'पृष्ठभूमि-आकार' सक्षम या अक्षम होने के बावजूद, छवि को हटाने से समस्या को पूरी तरह से हल किया जाता है। हालांकि, यह ओपी के प्रश्न के लिए बहुत कुछ नहीं प्रतीत होता है ;-) – STW

मैं एक ही समस्या थी और यह jQuery प्लगइन का उपयोग कर इसे हल: http://srobbin.com/jquery-plugins/jquery-backstretch/

यह किसी भी CSS3 संपत्ति का उपयोग नहीं करता है, लेकिन यह ठीक काम करता है और क्रोम 13 या Firefox 6 पर किसी भी प्रदर्शन मुद्दा नहीं है।

स्रोत

2011-08-31 16:31:33 kossdav

मेरी समस्या का समाधान किया। – Kirk

हां, सीएसएस और पृष्ठभूमि के साथ मेरे पेज प्रतिपादन को अवरुद्ध नहीं करना पसंद था। +1 और धन्यवाद! – eduncan911

jQuery से थक गया पहले से ही – Muhaimin

मैंने सोचा कि मैं यहां योगदान दूंगा। पृष्ठभूमि-अनुलग्नक का उपयोग करने के बजाय: निश्चित; उपयोग करें: पहले और स्थिति: तय; समस्या हल हो गई। मैं एक ही समस्या में भाग गया।

और पढ़ें यहाँ: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

स्रोत

2016-04-14 17:02:42 user2810762

बहुत बढ़िया समाधान। कोई jquery, सिर्फ शुद्ध सीएसएस 3! – TetraDev

यह पृष्ठभूमि-अनुलग्नक – Aljaz

का उपयोग करके एकाधिक तत्वों के साथ काम नहीं करता है यह अब मेरे लिए पहला Google परिणाम है और यह पूरी तरह से काम करता है। यह स्वीकार्य उत्तर होना चाहिए। –

इसके अलावा, html टैग करने के लिए निम्नलिखित शैली लागू वेबकिट ब्राउज़रों में काफी फ्रेम दर को बेहतर बनाता है, क्रोम शामिल:

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

यह (बड़े के साथ सभी मामलों में काम करता है) जहां तक मैं कह सकता हूं पृष्ठभूमि पृष्ठभूमि और चंचल स्क्रॉलिंग।

स्रोत

2017-01-23 14:32:44 TNF

छवि को संपीड़ित करना (आकार को कम करना), मेरी समस्या हल हो गई, मैं अत्यधिक प्रभावी और आसान Radical Image Optimization Tool (RIOT) जैसे टूल का उपयोग करने की अत्यधिक अनुशंसा करता हूं।

लिनक्स पर, यह GIMP का उपयोग करके किया जा सकता है, आप आकार को कम करने के लिए छवि के मेटाडेटा को भी हटा सकते हैं, exiftool जैसे टूल का उपयोग करें।

स्रोत

2017-07-09 06:41:30 ExillustX

समस्या वास्तव में पृष्ठभूमि-अनुलग्नक निश्चित मान के साथ है यदि आप इसे पृष्ठभूमि-संलग्नक में बदलते हैं: मोबाइल उपकरणों के लिए स्क्रॉल करें, इसे अंतराल को ठीक करना चाहिए।

स्रोत

2018-02-19 18:04:03 WPExplorer

मेरी निश्चित पृष्ठभूमि ने साइट को बहुत धीमा कर दिया, मैं इसे सुधारने के लिए क्या कर सकता हूं?

उत्तर

संबंधित मुद्दे