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

Question

我建立了一個投資組合網站，其中包含一個iFrame來展示藝術品。 為了顯示每個藝術品，將包含大圖像的html頁面加載到iFrame中。

iFrame在為空的情況下是隱藏的（顯示：無），僅當內容完全加載后才逐漸消失。

//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，但是緩慢加載促使我嘗試預加載圖稿圖像，以便它們會在用戶單擊以將其加載到iFrame之前開始下載。

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

現在，我遇到了一個問題-有時，當用戶單擊以加載圖稿時，iFrame會淡出以顯示一半加載的圖像，或者更糟的是僅顯示不加載圖像的html內容。 我已經看過Chrome開發者工具網絡檢查器，並且當相關圖片已開始預加載但尚未完成時，似乎會發生這種情況。

所以我的問題是：

a。）有人知道為什么會這樣嗎？ 是否是因為在更改iFrame src時通過預加載沒有對圖像的網絡請求，因此.load事件不等待圖像加載？

b。）有沒有一種方法可以讓iFrame .load事件等待“半張預載”圖像完成加載后再觸發？

期待中的感謝-輕松一點，我是JS的新手！

Answer 1

最后，通過在子HTML文檔中運行腳本來檢測圖像負載，使此方法可以正常工作。 然后，這會觸發父文檔中的“淡入功能”，從而淡化包含的iFrame。

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

Answer 2

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

您應該可以通過ready（）事件執行您想要的操作：

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

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

Answer 3

img標簽中還有一個.load（）函數，可用於顯示圖像是否已完全加載。

因此，我認為您可以使用.load（）函數啟用/禁用iframe點擊。

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