jquery: छवि के बाद छवि में फीका

Question

मेरे पास 10 छवियों वाला एक पृष्ठ है और मैं छवि डाउनलोड होने के बाद उन्हें एक-दूसरे में फीका करना चाहता हूं। मैं छवि को कैसे लोड कर सकता हूं और प्रदर्शित होने के लिए तैयार कैसे हो सकता हूं? और क्या मुझे लोड की गई छवियों के माध्यम से लूप करना चाहिए और एक बार फीका होना चाहिए लोड करने के लिए प्रतीक्षा करें?

Answer 1

बस छवि पर लोड() ईवेंट का उपयोग करें। जैसे

$('#some_image').hide() 
    .load(function() { 
     $(this).fadeIn(); 
    }) 
    .attr('src', 'images/headshot.jpg') 

Answer 2

आप छवियों को पहले से लोड कर सकते हैं (See here) और फिर लूप में क्रमशः फेडेन और फेडआउट विधियों को कॉल करें।

Answer 3

(क्रिस एरिक्सन के जवाब के आधार पर)

आप डोम (अपुष्ट में जोड़ने से पहले छवि के लिए घटना जोड़कर संभावित दौड़ की स्थिति से बचने के लिए सक्षम हो सकता है लेकिन मैं इसे खेलना पसंद सुरक्षित)। यह विधि एक दूसरे के शीर्ष पर लुप्तप्राय छवियों के लिए भी अच्छी है।

यही वह गैलरी नियंत्रण के लिए उपयोग कर रहा है जहां मैं एक और छवि के शीर्ष पर एक छवि जोड़ता हूं और इसे फीका करता हूं - तो अगर मैं पहले से ही 2 छवियों को जोड़ चुका हूं तो मैं नीचे की छवि को हटा देता हूं।

<div id="images_container"></div> 

सीएसएस इस तरह स्थापित किया जाना चाहिए या छवियों के बजाय एक दूसरे के ऊपर पर होने का ढेर होगा:

var url = .....; 
var container = $('#images_container'); 

$("<img />").hide().load(function() { 
    $(this).fadeIn(); 
}).attr('src', url).appendTo($(container)); 

if ($(container).children().length > 2) { 
    $(":nth-child(1)", container).remove(); 
} 

यहाँ एचटीएमएल है।

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}