Question

我希望立即加载我的主要品牌形象。我发现了一些有效的东西，但想知道这是不是很糟糕的做法。

将标记标记在头标记中是否有任何缺点？

它确实具有我正在寻找的效果。

我尝试过链接预取，但这并没有为我做任何事情。我的主要目标是在阻塞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>

  ....

Answer 1

我认为做预取会是一个更好的选择。例如：

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

在头标签中加载图像

1 个答案: