ヘッドタグに画像を読み込む

私は自分のメインブランドの画像をすぐに読み込みたいです。私はうまくいくものを見つけましたが、それが悪い習慣であるかどうか疑問に思います。ヘッドタグに画像を読み込む

イメージタグでマークアップすることに不利な点はありますかヘッドタグには？

それは私が探している効果があります。

私はリンクプリフェッチを試みましたが、それは私のために何もしませんでした。私の主な目的は、ブロックする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

私はプリフェッチを行う方が良い選択だと思います。例えば：

ここFYI

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);

、ない私のコードが、信用への（と詳細）：Will an html image tag execute in the head tag：https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

また、必ずしもすべてのブラウザでは、正しくこのSO記事では、この詳細については、これを解釈して

出典

2016-09-19 00:02:03

私はこれが好きで、間違いなくより多くの標準に準拠しています。しかし、bodyタグの最上部に画像をロードするよりも、画像の読み込みを速くするようには見えません。私はいくつかのロギング行を入れて、何らかの理由で、プリローダー関数は、すべてのヘッドがロードされた後（つまり、そのcssをブロックしている）まで実行を待ちます。私の推測では、それはwindow.onloadと関係があるということです：http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – dgig

はい、そうです。 window.loadは、cssがロードされるまで待機します。別の方法として、ページ上部とメインCSSの前にインラインスタイルを追加する方法があります。あなたはそれをテストする必要がありますが、大きな違いがあるかどうかはわかりません。 –

ご協力ありがとうございます。私はこれを試しましたが、ボディがロードされるまでローディングを止めているようです。確かに、私が試しているハックよりも忠実です。私は考えることができる – dgig

ヘッドタグに画像を読み込む

答えて

関連する問題