。頁面刷新後不執行.load（）

我試圖檢索頁面加載後的圖像尺寸，並且如果視圖端口尺寸被修改。我可以在使用.load進行頁面加載後檢索圖像尺寸，但是一旦視圖端口被修改，我還沒有弄清楚如何檢索新的圖像尺寸。。頁面刷新後不執行.load（）

我已經寫了被執行的一種功能，當文件已準備就緒：

$(document).ready(ViewPortUpdate);

當視口被修改，我調用同一個功能：

$(window).resize(ViewPortUpdate);

的功能是完全在這兩種情況下都執行，除了只在文檔完成時才觸發的加載事件，而如果視口被修改則不再有加載事件。

例子：

function ViewPortUpdate() 
{ 
console.log('view port updated'); 
$(".myimage").load(function() 
    { 
     // Here I retrieve the final image size 
     console.log('image loaded'); 
    } 
}

加載頁面時，我看到在我的控制檯「查看端口更新」和「圖像加載」但如果我調整窗口的大小，我只看到「更新視口」。我想這個.load只能工作一次，改變視圖的端口大小沒有任何作用。

我可能沒有使用正確的方法，但我不知道如何解決這個問題。

有什麼想法？

感謝洛朗

來源

2016-02-08 Laurent

可能的複製[檢測圖像負載（http://stackoverflow.com/questions/3537469/detect-image-load） – dave

那我們是正確的。您分配加載事件，一旦它被分配，它只會在圖像加載時觸發，但在分配之前它已經加載 – mplungjan

可以幫助圖像「調整大小」事件而不是「加載」？ –

你可以試試這個：

$(window).resize(function(){ 
    ViewPortUpdate(); 
    $('.myimage').trigger('load'); 
});

重要提示：我會建議刪除你從負載情況下的圖像大小的部分，使其成爲一個獨立的功能，而不是這個。

來源

2016-02-08 21:12:13

Hello Arman，我想你已經找到了我的解決方案，我只是在.load之前添加了.trigger，它完美地工作，但它看起來不是什麼好事（根據您的筆記）。你會如何將觸發器與負載結合起來？謝謝！ – Laurent

根據定義，加載事件應該只觸發一次。瀏覽器基於這些事件呈現頁面，並且不是第二次（或更多）手動觸發加載事件的好習慣。它可能會導致問題，也可能不會導致問題，但作爲一個原則，當有另一種方式時，你不應該那樣做。就你而言，還有另一種方法。如果您只需要基於視口更改的當前圖像維度，則可以爲此創建一個函數，將所有用於獲取維度的內容都放入其中，並在'$（window）.resize（）'和' $（'。myimage'）。load（）'函數。 –

我已經嘗試了兩個，觸發器工作正常。如果我創建一個函數，它只是將圖像維度輸出到控制檯中，並使用window.resize（）調用它，我會得到不同的（和不正確的）值。看起來調整大小是在知道最終維度之前觸發的，我使用window.resize（）獲得的值總是低於使用trigger + load獲得的值。 – Laurent

可能的解決方案：所有的DOM的內容，包括圖像之後

$(window).on("load resize", function() { 
    // retrieve image size 
});

因爲$(window).on("load", someFunction)觸發器，被加載。

但是，如果窗口在完全加載之前調整大小，則可能無法獲取所有圖像尺寸。在這種情況下，也許：中

$(window).on("load", function() { 
    viewPortUpdate(); 
    $(window).on("resize", viewPortUpdate); 
}); 

function viewPortUpdate() { 
    // get image sizes; 
}

來源

2016-02-08 21:16:25

你好邁克，.on（「負載調整大小」）工作與延遲加載？圖像在加載頁面後加載，這就是爲什麼我直接使用.load與圖像。謝謝 – Laurent

啊，明白了 - 記不清了，但我不相信$（window）.on（「load」）捕獲延遲加載的圖像。在某些情況下，如果延遲加載腳本在頁面完全加載之前運行（即，在之前的內聯腳本中），而在頁面被認爲是100％加載的情況下則不會運行，然後在1秒後加載圖像。 –

這可能有所幫助：http://www.experts-exchange.com/questions/28434237/JQuery-Javascript-Detect-IF-an-image-has-loaded-Else-use-another-image.html - 可能正在運行像這樣的條件像viewPortUpdate（）像$（「。myImage」）。每個（功能（）{/ *測試如果圖像加載，如果這樣抓尺寸* /}）; –

。頁面刷新後不執行.load（）

回答

相關問題