功能不同的工作每重裝

我知道這聽起來有點不可思議，但我有功能改變圖像的高度和寬度，我執行它的文件準備好。但每次刷新頁面時，我都會得到相同圖像的不同結果（每4或5次就會得到一次）。這裏是我的代碼：功能不同的工作每重裝

$("img").each(function(){ 
    $(this).width(
     parseInt($(this).width())/(parseInt($(this).width())/parseInt($(".container").css("height"))) 
    ); 
    $(this).height(parseInt($(".container").css("height"))); 
});

的圖像是在一個容器中，我希望他們有相同的高度容器和寬度高度也同樣改變。容器的高度是動態變化的，每當我改變容器的大小時，我也會改變圖像的大小（這裏我沒有問題）。我不太明白，每次加載我的頁面時，這種工作方式會有什麼不同。

來源

2014-06-16 veili_13

因爲圖像需要時間來加載...和JavaScript代碼的運行速度比圖像預加載 –

嘗試更快[ImageLoader的（http://beatak.github.io/jquery-imageloader/） – Sandy

你不需要等待圖像加載。

但是，你至少需要等待他們開始加載。

有什麼區別？那麼，在我意識到的所有圖像格式中，第一部分元數據之一就是圖像的尺寸。這就是爲什麼在更大的圖像中，您可以在圖像開始加載後立即看到瀏覽器預留空間，然後在加載圖像時將其填入圖像中。

~~所以！考慮到這一點，讓我們的頁面看起來儘可能銳利，對嗎？~~

忘了這一切，我剛剛意識到，你的高度設置爲容器的高度？在那種情況下...

$("img").each(function(){ 
    this.style.width = "auto"; 
    this.style.height = "100%"; 
});

你走了。對寬度使用auto將保持寬高比。

來源

2014-06-16 12:13:21

就像一個使用此魅力。非常感謝你。 –

@ veili_13酷:)如果任何人的好奇，原來的計劃，我的網站使用的代碼反覆調查圖像，直到他們返回'this.width'是非零。只要它不是零，就對圖像做一些事情並停止輪詢它。這樣，只要圖像開始加載，圖像就已經被處理，即使是大圖像文件也能爲用戶提供無縫的體驗。 –

您應該等待所有圖像加載使用$(window).load()功能，或者使用其他方式來控制好你的圖片加載。選擇你的方式，但問題只是你的函數在圖像加載之前被觸發。

來源

2014-06-16 12:02:48 Gatekeeper

功能不同的工作每重裝

回答

相關問題