पृष्ठभूमि को चित्रित करना- jquery का उपयोग करके छवि एक झटकेदार प्रभाव का कारण बनती है

Question

फ़ॉलविंग स्क्रिप्ट का वह हिस्सा है जिसका उपयोग मैं प्रत्येक छवि के लिए पृष्ठभूमि छवि को बदलकर एक स्लाइडर बनाने के लिए कर रहा हूं, मेरे पास समय के चक्र के लिए है ..

 #Sliderimg - height is 500px, 

     $("#Sliderimg").css({ 
      "background-image": "url(../Images/" +SliderImageObj.image + ")", 
      "display": "block", 
      "z-index": "50px" 
     }); 

इस के साथ क्या गलत हो सकता है क्योंकि जब भी मैं छवि बदलता हूं, तो मुझे झटकेदार प्रभाव मिल रहा है, मेरी समस्या नई छवि के साथ लोड होने के बारे में नहीं है, इसकी झटकेदार (स्क्रीन के नीचे चमकती है)) पुरानी छवि के लिए जो प्रतिस्थापित किया जा रहा है।

Answer 1

शायद आपके जेड-इंडेक्स एट्रिब्यूट से "पीएक्स" हटाएं? यह दशमलव मान लेता है।

Answer 2

आप एक झिलमिलाहट देखते हैं क्योंकि हर बार जब आप पृष्ठभूमि छवि बदलते हैं, तो ब्राउज़र को पृष्ठभूमि दिखाने से पहले इसे डाउनलोड करना होगा। यदि छवियां बहुत बड़ी नहीं हैं (कहने से अधिक, 5kb) आप उन तत्वों को लागू करके ब्राउज़र में उन्हें कैशिंग करने का प्रयास कर सकते हैं जहां वे दिखाई नहीं देंगे।

इसके अलावा, 50px मान्य जेड-इंडेक्स नहीं है, उस संपत्ति को केवल पूर्णांक की आवश्यकता होती है।

Answer 3

ब्राउज़र को पूरी पृष्ठभूमि को फिर से चलाने के लिए मजबूर होना पड़ता है।

यह कैसे किया जाता है यह पृष्ठभूमि को सफेद पर सेट करके और फिर नई पृष्ठभूमि को दोबारा बदलकर किया जाता है।

इस लड़ाई के लिए jquery.animate() का उपयोग करें।

Answer 4

मुझे दूसरे दिन एक ही समस्या थी। विचित्र रूप से पर्याप्त, यह एफएफ में ठीक प्रतीत होता था, लेकिन आईई, क्रोम, और कभी-कभी सफारी में फ्लिकर होगा। समाधान एक सीएसएस स्प्राइट शीट का उपयोग करना है। आप एक ऐसी छवि बनाते हैं जिसमें दोनों पृष्ठभूमि एक-दूसरे के बगल में हों। आप केवल पृष्ठभूमि शीट का एक हिस्सा दिखाते हैं। आप पृष्ठभूमि पर मार्जिन समायोजित करके इसे टॉगल करते हैं। आप addClass और removeClass का उपयोग कर मार्जिन समायोजन को संभाल सकते हैं। नीचे दिए गए कोड, एक बेला के लिए यहाँ देखें: http://jsfiddle.net/fMhMY/

सीएसएस

.navButton span{ 
width:32px; 
height:32px; 
display:block; 
} 

a.leftButton span, a#leftButton span{ 
background-image:url(Prev.png); 
background-position:-64px 0px; 
} 

/*nav button sprites */ 

/*sprite order is pushed, hover, natural */ 

a.leftButton.navOver span, a.rightButton.navOver span{ 
background-position:-32px 0px; 
} 

a.leftButton.navPressed span, a.rightButton.navPressed span{ 
background-position:0px 0px; 
} 

एचटीएमएल

<div style='display:inline-block'> 
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'> 
     <span></span> 
    </a> 
</div> 

jQuery

$('.leftButton').mousedown(function() { 

     $('.leftButton').addClass('navPressed'); 
     console.log('mousedown'); 

}); 
$('.leftButton').mouseup(function() { 
     $('.leftButton').removeClass('navPressed'); 
     console.log('mouseup'); 
}); 

$('.leftButton').hover(function() { 
     $('.leftButton').addClass('navOver'); 
     console.log('hover'); 
}); 


$('.leftButton').mouseout(function() { 
     $('.leftButton').removeClass('navPressed').removeClass('navOver'); 
     console.log('mouseout'); 
});