सीएसएस के साथ छवि स्वैप - झिलमिलाहट मुद्दा - सीएसएस

मैं सीएसएस के साथ एक छवि को स्वैप करने की कोशिश कर रहा हूं लेकिन जब माउस पहली बार रोल करता है, तो एक छवि को दूसरे के साथ बदलने के बजाय, मुझे पहले एक फ़्लिकर मिलता है। यहाँ मेरा CSS कोड है:

#UL {
width: 50px;
height: 54px;
background:url("/img/UL_gr.png") no-repeat;
}
#UL:hover {
background-image:url("/i/logos/UL.png");
}

उत्तर:

अपनी छवियों को प्रीलोड करें और स्प्राइट्स का उपयोग करें। समस्या सुलझ गयी!

नई छवि (UL.png?) में लोड करने की कोशिश कर रहे ब्राउज़र की वजह से शायद झिलमिलाहट होती है?

बस देखने के लिए, src और प्रदर्शन के रूप में "/i/logos/UL.png" के साथ एक img तत्व जोड़ने का प्रयास करें: इनलाइन शैली के रूप में कोई नहीं। अपने पृष्ठ पर इसे कहीं जोड़ें और देखें कि क्या मदद करता है।

झिलमिलाहट इसलिए है क्योंकि छवि लोड नहीं हैफिर भी, आपको इसे लोड करना चाहिए। ऐसा करने के कई तरीके हैं, नीचे एक तरीका है। यह पृष्ठ में tn शो नहीं है, लेकिन चूंकि यह शरीर में है, इसलिए यह अभी भी छवि को लोड करेगा। अपनी सभी अन्य सामग्री के नीचे रखें, इसलिए यह tn नहीं है। किसी और चीज की लोडिंग को धीमा करें।

<div style="display:none;">
<img src="/images//i/logos/UL.png" >
</div>

कारण सबसे अधिक संभावना है, कि ब्राउज़र ने अभी तक छवि को लोड नहीं किया है। आप के रूप में वर्णित पर प्रीलोड कर सकते हैं यह पन्ना.