XHTML JavaScript預加載頁面的其餘部分之前的圖像

是否有反正我可以延遲顯示的HTML代碼（頁），直到某些圖像加載，使佈局出現與標題圖像以及HTML？XHTML JavaScript預加載頁面的其餘部分之前的圖像

謝謝。

2010-09-30 Francisc

你爲什麼要這樣做？懶惰地顯示頁面是一個功能，而不是一個bug;給你的圖像正確的寬度/高度，以便它們不會改變負載上的頁面佈局，你應該沒問題;預加載僅適用於不屬於默認頁面結構的圖像，因爲它們稍後通過腳本或懸停效果添加 – Christoph 2010-09-30 16:41:32

我只能說我的客戶是白癡並且不會理解爭論...... – Francisc 2010-09-30 16:42:38

哦，而且佈局不閃爍，大小已經到位...... – Francisc 2010-09-30 16:44:35

這應該這樣做，但它是你的，以保護客戶從自己的責任 - 畢竟，你是專業的...

<head> 
<script type="text/javascript"> 
//<![CDATA[ 
with (document.documentElement.style) { 

    visibility = 'hidden'; 
    overflow = 'hidden'; 

    window.onload = function() { 
    visibility = ''; 
    overflow = ''; 
    }; 
} 
//]]> 
</script> 
</head>

注：使用display = 'none'而不是不工作，我的（有點老）Opera 10.10作爲onload將立即啓動...

此外，這將延遲顯示頁面，直到全部外部資源已被加載。如果你只是想等待某些圖像，你需要一個更復雜的腳本（未經測試）：

<head> 
    <script type="text/javascript"> 
//<![CDATA[ 
document.documentElement.style.display = 'none'; 
//]]> 
    </script> 
</head> 
<body> 
    <img stc="…" width="…" height="…" alt="…" class="preload"> 
    <!-- page contents… --> 
    <script type="text/javascript"> 
//<![CDATA[ 
(function() { 
    var remaining = 0; 

    function listener() { 
     if(!--remaining) 
      document.documentElement.style.display = ''; 
    } 

    for(var i = 0; i < document.images.length; ++i) { 
     var img = document.images[i]; 
     if(/(^|\s)preload(\s|$)/.test(img.className) && !img.complete) { 
      ++remaining; 
      img.onload = listener; 
      img.onerror = listener; 
     } 
    } 
})(); 
//]]> 
    </script> 
</body>

來源

2010-09-30 16:59:08 Christoph

謝謝克里斯託弗，感謝大家對我們所提供的所有幫助。 – Francisc 2010-09-30 20:10:42

我已經決定在閱讀完所有內容之後不要這樣做，並且看到這樣的解決方案意味着隱藏和展示身體，我希望有一種更優雅的方式，那就是沒有。再次感謝你，非常感謝。 – Francisc 2010-09-30 20:11:53

我分享克里斯托夫認爲，一個網頁應該被顯示給用戶以最快的速度possible-即使只是頁面的一部分。如果沒有任何事情發生，這很煩人。

但你可以嘗試

<body id='body' style='display:none;' 
     onload="document.getElementById('body').style.display='block';">

（或不工作，也

<body style='display:none;' onload="this.style.display='block';">

- 需要嘗試）

這將所有圖片，腳本，樣式表後顯示的頁面，並加載多媒體文件。

來源

2010-09-30 16:59:48 Jan

afaik如果某些瀏覽器是'display：none'，則不會加載圖像 - 請使用'visibility'（請確認）;此外，您的報價不能正確嵌套 – Christoph 2010-09-30 17:06:08

我剛剛嘗試使用Firefox 3.5，Chrome 6，MSIE8。我在onload上使用了一個圖像，並且它對它們進行了處理（顯示：沒有在body上）。但我反對這個建議。 – some 2010-09-30 17:09:57

如果圖像出於某種原因未加載，則頁面將不可見，因爲沒有onload事件。 – some 2010-09-30 17:18:49

XHTML JavaScript預加載頁面的其餘部分之前的圖像

回答

相關問題