在磁头标签中加载图像

我希望立即加载我的主品牌图像。我发现了一些可行的方法，但不知道这可能是不好的做法。在磁头标签中加载图像

是否有任何缺点将图像标签标记在头标签内？

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

我试过链接预取，但是这对我没有任何帮助。我的主要目标是在阻塞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

在磁头标签中加载图像

回答

相关问题