2014-12-19 104 views
0

我想創建一個圖片預覽插件,爲了這個,我想創建的預覽圖像下方的動態條帶標題等調用函數執行完畢

的形象有沒有一致的寬度,所以我每次選擇新圖片時都需要調整欄。

預覽圖像源也是用點擊圖像的源路徑動態創建的,但是是另一個目錄。

要調整我要求預覽圖像的寬度的條形:var width = $("#maximized_image").width();,我在設置預覽圖像的來源後直接調用它。

但我的問題是,有時顯然在定義寬度後加載圖像,所以我的寬度爲0,我的欄不可見。是否有可能等待圖像加載或強制jquery等待它?

或者有沒有人有另一種解決方案?

編輯: 這是我到現在爲止:

var img = $(this).attr("src"); 
    var img_split = img.split('.'); 
    var img_path = img_split[0]; 
    var rest = img_path.substring(0, img_path.lastIndexOf("/") + 1); 
    var last = img_path.substring(img_path.lastIndexOf("/") + 1, img_path.length); 
    var max_image = rest + "/normal/" + last + "." + img_split[1]; 
    $("#image_maximizer").css("height", win_h).css("width", "100%").css("display", "block").css("background", "rgba(0, 0, 0, 0.6)"); 
    $("#render_img").attr("src", max_image); 
    var width = $("#maximized_image").width(); 
    alert(width); 

此設置圖像,但我沒有得到圖像的寬度

+0

您需要等待元素的'onload'事件觸發,然後詢問元素的'width' – Xotic750

+0

何時加載「#maximized_image」,是否加載頁面,或者是否將這些圖像動態注入頁面AFTE r頁面加載?根據這將決定哪些元素的「onload」事件需要觀看。 – Xotic750

+0

我的方法是將圖像的名稱注入源路徑。 – Snickbrack

回答

1

您可以加載圖像,但使其關閉屏幕,獲得寬度然後加載它在你需要它的地方(你不會加載它兩次,因爲它已經加載/緩存)

我建議雖然你加載圖像然後加載在酒吧有一個很好的淡入淡出效果或東西,我敢肯定,300毫秒的延遲不會造成差距太大?

使用類似的onLoad的圖像時,圖像加載,但它仍然必須被渲染後的第一

+1

當觸發'onload'事件時,DOM將獲得有關元素大小的信息,無論它是否由瀏覽器呈現。 – Xotic750

+0

確實如此,但問題是要同時顯示條形圖和圖像,並且onLoad事件仍會在圖像加載後發生。我想你可以結合這兩個概念(onLoad或屏幕外顯示的圖像) – atmd

+0

問題中的一個關鍵問題是:「但我的問題是,有時顯然在定義寬度之後加載圖像,所以我的寬度爲0」。這與渲染實際圖像無關,即使您在屏幕上渲染圖像仍然需要首先知道的大小,這在'onload'上已知。 – Xotic750

1

運行功能,當頁面完全加載包括圖形會說:

$(window).load(function() { 
    // Run code 
}); 

jquery load event

+0

這是我的第一個內涵,但.load事件沒有被解僱。 – Snickbrack

相關問題