jQuery एक छवि प्रतिस्थापन

Question

आशा है कि आप सलाह दे सकते हैं मैं एक छवि प्रतिस्थापन जो मैं एक का चयन menu.ie में झुका है से बाहर में कुछ सरल फीका जोड़ना चाहते हैं पर चेतन,

$("#vehicle").change(function(){ 
    var selected = $(this).val(); 
    $("#selectedVehicle").attr('src', '/assets/images/mini/'+selected+'.png'); 
}); 

<img id="selectedVehicle" src="/assets/v2/images/select-vehicle.png"> 

किसी भी सुझाव मैं कैसे कर सकते हैं कर दो?

Answer 1

यदि आप छवियों को प्रीलोड करते हैं तो यह सबसे अच्छा काम करेगा।

$("#vehicle").change(function(){ 
    var selected = $(this).val(); 
    var image = $("#selectedVehicle"); 
    image.fadeOut('fast', function() { 
     image.attr('src', '/assets/images/mini/'+selected+'.png'); 
     image.fadeIn('fast'); 
    }); 
}); 

इस छवि को बाहर फीका करना होगा, बदल src, तो यह में वापस नहीं हो पाती। Fading कार्यों के बारे में अधिक जानकारी के लिए संदर्भ jQuery docs।

फिर से, आपको अपनी छवियों को प्रीलोड करना चाहिए, अन्यथा यह लोड होने के दौरान वापस फीका हो सकता है।

Answer 2

मैं नहीं बल्कि फ्लाई पर की तुलना में, पृष्ठ लोड पर छवि पहले से लोड होने के लिए चले गए हैं ...:

$(document).ready(function() { 
    function buildUrl(val) { 
    return '/assets/images/mini/' + val + '.png'; 
    }; 

    $('#vehicle').change(function() { 
    var value = $(this).val(); 

    $('#selectedVehicle').fadeOut('fast', function() { 
     $(this).attr('src', buildUrl(value)).fadeIn('fast'); 
    }); 
    }).children('option').each(function() { 
    var img = document.createElement("img"); 

    img.src = buildUrl($(this).val()); 
    img.onload = function() {}; 
    }); 
});