jQuery động trên một thay thế hình ảnh

Question

Hy vọng bạn có thể tư vấn cho tôi muốn thêm một số phai đơn giản trong ra khỏi một sự thay thế hình ảnh mà tôi đã nối vào một menu.ie chọn,

$("#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"> 

bất cứ đề nghị làm thế nào tôi có thể làm đi?

Answer 1

Điều này sẽ hoạt động tốt nhất nếu bạn tải trước hình ảnh.

$("#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'); 
    }); 
}); 

này sẽ mờ dần hình ảnh ra ngoài, thay đổi src, sau đó mờ dần nó trở lại. Tham khảo jQuery docs để biết thêm thông tin về chức năng mờ dần.

Một lần nữa, bạn nên tải trước hình ảnh của mình, nếu không nó có thể mờ dần trong khi vẫn tải.

Answer 2

tôi đã đi cho tải trước hình ảnh trên tải trang, chứ không phải là một cách nhanh chóng ...:

$(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() {}; 
    }); 
});