iFrame .load事件不會等待預加載圖像完成

我已經構建了一個包含用於顯示藝術品的iFrame的投資組合網站。要顯示每個圖稿，將包含大圖像的html頁面加載到iFrame中。iFrame .load事件不會等待預加載圖像完成

iFrame在空的時候被隱藏（display：none），並且只有在內容完全加載時纔會淡入。

//pass url of artwork page to iFrame 
$("#creativeiframe").attr('src', thisLink.attr('href')); 

//fade up iFrame once content loaded 
$('#creativeiframe').load(function() { 
     $('#creativeiframe').fadeIn(300); 
});

我有這個預期運行 - 當包括大圖像內容已經完全加載內嵌框架只會加載，但加載速度慢促使我嘗試預裝藝術品圖像，這樣他們就開始下載前用戶點擊將其加載到iFrame中。

function preloadImage(url) { var img=new Image(); img.src=url; }

現在我有一個問題 - 有時，當用戶點擊加載一個藝術品的iFrame會褪色起來呈現出半載圖像，或者更糟的只顯示了不加載圖片的HTML內容。我查看了Chrome開發人員工具網絡檢查員，並且在問題圖像已開始預加載但未完成時出現這種情況。

所以我的問題是：

一）有誰知道爲什麼發生這種情況？這是否是因爲預加載在iFrame src發生更改時沒有網絡請求，因此.load事件不會等待映像加載？

b。）有沒有一種方法可以讓iFrame .load事件等待「半預裝載」圖像在發射前完成加載？

感謝預期 - 去輕鬆，我是一個JS新手！

來源

2013-12-15 Steve Brown

如果您的圖片真的很大，我建議您使用** Progressive JPEG **進行預覽。 –

謝謝伊戈爾，是的，我使用漸進JPEG，儘可能壓縮等。 –

順便說一句，有人知道我的問題爲什麼被拒絕嗎？沒有人要求澄清或完全回答它，所以假設它是相當明確的，而不是一個愚蠢的問題。我是新來這個論壇，所以想改善... –

我最終通過在子HTML文檔中運行腳本來檢測圖像加載，從而最終實現了這一目標。然後在父文檔中觸發一個「淡入淡出功能」，淡入淡出包含的iFrame。

<script type='text/javascript'> 
    var img = new Image(); 
    img.onload = function(){ 
     window.parent.fadeFn(); 
    } 
    <?php echo"img.src='".$fileNameVar."'"?> 
    </script>

來源

2014-01-08 12:02:22

編輯：這是不正確的，我很困惑當DOM完全加載，但不包括外部圖像時觸發加載事件。

你應該能夠做你想做的與準備（）事件：

//no reason to run the jQuery selector multiple times 
var creativeIframe = $("#creativeiframe"); 

//fade up iFrame once content loaded 
creativeIframe.ready(function() { 
     creativeIframe.fadeIn(300); 
});

來源

2013-12-15 12:55:41

這不是相反嗎？ http://api.jquery.com/ready/「在代碼依賴於加載資源的情況下......應該將代碼放置在加載事件的處理程序中。」還有。ready（）只能在與當前文檔相匹配的jQuery對象上調用，而iFrame內容不是。 –

已經嘗試過，但.ready（）永遠不會觸發 - 即使在加載圖像時也是如此。好的，關於我多次調用jQuery選擇器，謝謝。 –

你是對的，我把這兩個混在一起。 –

也有在IMG標籤的.load（）函數，它可以用來顯示圖像是否是否完全加載。

所以我認爲你可以使用.load（）函數來啓用/禁用iframe點擊。

或者顯示一個等待指標，也許更好。

來源

2013-12-15 12:58:11 Sho

謝謝Sho - 你是否建議在子頁面中運行一個腳本來檢測圖片是否被加載？任何想法如何才能觸發父iFrame的淡入？ –

您可以顯示iframe，並將display：none應用於其內容，在img加載時將其刪除（/淡入） –

謝謝我將嘗試將此作爲解決方法，但它不是理想的，因爲加載動畫位於iFrame後面（將它放在iFrame中是沒有意義的，因爲有幾個不同的HTML'模板'會被載入，所以這意味着所有這些都會重複）。我仍然很好奇，爲什麼預加載正在破壞以前的工作... –

iFrame .load事件不會等待預加載圖像完成

回答

相關問題