javascript：如何在加載后設置圖像的寬度？

Question

所以，我正在使用facebox來整潔地顯示圖像，我寫了一個函數來幫助處理真正大圖像的大小:(小提琴： http ： //jsfiddle.net/LPF85/ ）

function open_img_in_face_box(id, width){
    max_width = $j(document).width();
    max_height = $j(document).height();
    padding = 50;

    max_width = max_width - (2 * padding);
    max_height = max_height - (2 * padding);

    passed_width = width || max_width;

    var img = $j('#' + id); 
    dom_img = document.getElementById(id); 

    // display 
    jQuery.facebox({ image: img.attr('src') });

    // center and adjust size
    var aspect_ratio = img.width() / img.height();
    var img_width = passed_width;
    var img_height = passed_width / aspect_ratio;

    window_center_y = max_height / 2;
    window_center_x = max_width / 2;

    offset_y = window_center_y - (img_height / 2);
    offset_x = window_center_x - (img_width / 2);

    var fbx = $j('#facebox');
    fbx.css('left', offset_x + 'px !important');
    fbx.css('top', offset_y + 'px !important')

    $j("#facebox .image img").load(function(){
        $j(this).width(img_width);
    });
}

但問題是圖像保持完整大小，永遠不會變為500（我用於img_width的當前值）。

如何在加載后更改圖像的寬度，但是足夠快，沒有人注意到？

我已在Chrome和Safari中使用此html進行了測試：

<img id="facebox_img" onclick="open_img_in_face_box('facebox_img', 500)" src="/medias/50/original.jpg" width="300" />

Answer 1

嘗試這個

$j("#facebox .image img").each(function(){
    $(this).load(function(){
        $j(this).width(img_width);
    }).attr("src", $j(this).attr("src"));
});

Answer 2

干得好：

更換：

$j("#facebox .image img").load(function(){
    $j(this).width(img_width);
});

有：

 $j(document).bind('reveal.facebox', function() { 
    $j("#facebox .image img").width(width);
 }) 

這個新代碼監聽reveal事件，並在所有元素到位后相應地設置寬度。