在磁頭標籤中加載圖像

我希望立即加載我的主品牌圖像。我發現了一些可行的方法，但不知道這可能是不好的做法。在磁頭標籤中加載圖像

是否有任何缺點將圖像標籤標記在頭標籤內？

它確實有我正在尋找的效果。

我試過鏈接預取，但是這對我沒有任何幫助。我的主要目標是在阻塞css之前加載圖像。這似乎完成了。

<head> 
    <title>My Page</title> 
    <div id="preload" style="position: absolute; top:-999999px;"> 
    <img src="/images/mainimage.png" /> 
    <img src="/images/nav/a.jpg" /> 
    <img src="/images/nav/b.jpg" /> 
    <img src="/images/nav/c.jpg" /> 
    <img src="/images/nav/d.jpg" /> 
    <img src="/images/nav/e.jpg" /> 
    <img src="/images/nav/f.jpg" /> 
    </div> 

    ....

來源

2016-09-18 dgig

看到這個：https://stackoverflow.com/questions/3469587/will-an-html-image-tag-execute-in-the-head-tag – martriay

啊完美，謝謝。也許這應該作爲重複來關閉。 – dgig

不一定，你的文章是關於不好的做法 – martriay

我認爲做一個預取將是一個更好的選擇。例如：

function preloader() { 
if (document.images) { 
    var img1 = new Image(); 
    var img2 = new Image(); 
    var img3 = new Image(); 

    img1.src = "http://domain.tld/path/to/image-001.gif"; 
    img2.src = "http://domain.tld/path/to/image-002.gif"; 
    img3.src = "http://domain.tld/path/to/image-003.gif"; 
} 
} 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
    window.onload = func; 
} else { 
    window.onload = function() { 
     if (oldonload) { 
      oldonload(); 
     } 
     func(); 
    } 
} 
} 
addLoadEvent(preloader);

僅供參考，不是我的代碼，但信貸（及更多信息）在這裏：https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

而且，並非所有瀏覽器都可以正確地解釋這一點，更多關於這個在這個SO帖子：Will an html image tag execute in the head tag

來源

2016-09-19 00:02:03

我喜歡這個，肯定會更符合標準。但它似乎並沒有讓圖像加載速度快於將它加載到body標籤的頂部。我放了一些日誌行，不管什麼原因，preloader函數都會等待執行，直到所有頭都加載完畢（意思是阻塞css）。我的猜測是它與window.onload有關：http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – dgig

嗯，這是真的。 window.load將等到css加載完畢。另一種方法是在頁面頂部和主CSS之前添加內聯樣式。你需要測試它，但不知道它是否會產生巨大的差異。 –

感謝您的幫助。我試過這個，但它似乎也延緩了加載，直到身體加載。它肯定比我嘗試的黑客更符合要求。 – dgig

在磁頭標籤中加載圖像

回答

相關問題