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

所以，我使用facebox整齊地顯示圖像，以及我寫了一個函數來幫助HANDELING真正的大圖像的大小：（小提琴：http://jsfiddle.net/LPF85/）javascript：如何在加載後設置圖像的寬度？

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瀏覽器有這個網站：

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

來源

2011-08-04 NullVoxPopuli

在什麼時候調用這個函數？你有沒有在多個瀏覽器中測試？你可能會遇到'load'的瀏覽器不一致。 –

我會更新我的問題。 – NullVoxPopuli

我不知道在運行該代碼時圖像是否在內存中。 = \ – NullVoxPopuli

在這裏你去：

替換：

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

與：

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

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

來源

2011-08-04 18:02:09 Joe

正確。圖像和可能的facebox尚未加載，因此在運行時不起作用。 http://jsfiddle.net/LPF85/ < - code。但在圖像加載完成後進入控制檯。 – NullVoxPopuli

[示例]（http://jsfiddle.net/LPF85/5/） – Joe

試試這個

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

來源

2011-08-04 17:43:22 ShankarSangoli

爲什麼更改src？ – NullVoxPopuli

寬度沒有改變。我認爲這是因爲選擇器不返回任何東西，因爲圖像尚未加載。或者facebox還沒有完成渲染或者什麼的。 – NullVoxPopuli

我用你的代碼創建了一個fiddel http://jsfiddle.net/LPF85/ – NullVoxPopuli

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

回答

相關問題