4

私はこのような簡単なグーグル検索コードを作りました：

<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img src="http://www.google.com/images/srpr/logo3w.png"><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>

この場合、コード（フォームを含む）と画像（Google画像）が同時に読み込まれます。

画像よりも最初にロードするフォーム（入力）を作成するにはどうすればよいですか？

4

6 に答える 6

5

srcDOMの準備ができたら、イメージのを設定できます。

<div style="text-align:center">
    <form method="get" action="http://www.google.com/search">
        <img id="googleimage" data-src="http://www.google.com/images/srpr/logo3w.png"/><br>
        <input style="width:300px"name="q">
        <input type="submit" value="Google Search" >
    </form>
</div>

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(){
      var img = document.getElementById('googleimage');
      img.src = img.getAttribute('data-src');
   }, false);
</script>

http://jsfiddle.net/gaby/mpEeF/でのデモ

これを追加するだけで、画像が読み込まれるときに（フォームの前にある可能性があります）フォームが押し下げられ、フォームの検索と編集が困難になる場合、唯一の解決策は実際のサイズ（幅/高さ）を追加することです。 style属性を介して）を画像に追加します。これにより、画像が読み込まれる前であっても、ブラウザがページの最終的な外観を正しく計算できるようになります。

于 2012-04-24T17:52:18.343 に答える
4

どういう意味

それらは同時にロードされます

それらは同時にロードされないため、最初にページがロードされ、imgタグが解析されるのと並行して画像がロードされます。したがって、実際にはブラウザはほぼ必要な処理を実行します。読み込みが遅いimgを使用することで、フォームが最初に読み込まれることを確認できます。

とにかく、あなたが解決しようとしている実際の問題は何ですか。

于 2012-04-24T17:58:16.830 に答える
2

このコードを確認してください。ページにjqueryを含めるか、jqueryコードを通常のjavascriptに変換する必要があります

http://jsfiddle.net/pt4DT/

于 2012-06-04T06:45:40.393 に答える
1

form（input）を最初にロードしたい（そしてユーザーが早く書けるようにしたい）、画像は重要ではないので、最後にロードしたい（すべてのhtml、css、jsがロードされた後）

さて、まず第一に、これは私が思うIE6頃からのすべての新しいブラウザにのみ当てはまると私に言わせてください（正確にいつかはわかりません）が、それでも大多数であるはずです。

以下に、htmlを含む一般的なページの読み込み方法の画像を示します（最初の行はhtml、2番目のjs、3番目と4番目のcss、最後の画像です）。 ページの読み込みを示すウォーターフォール

ご覧のとおり、どのjsとcssをロードする必要があるかを知る必要があるため、最初にhtmlがロードされます。さて、これはブラウザとブロッキング/ノンブロッキングjavascriptに依存しますが、画像自体がjs / cssと並行して読み込まれることもあれば、cssとjavascriptのダウンロードが完了すると読み込まれることもあります（上の画像のように）。いずれにせよ、ブラウザが何をするにしても、それが最適なソリューションになります（たとえば、ほとんどのブラウザが並行して実行するhttpsリクエストの数には制限があり、spdyプロトコルによって解決されますが、それは別の話です）。ここで、グラフをさらに詳しく見ると、2本の線が表示されます。1本はページがユーザーに表示されたときに表示される青い線（フォームはあるが画像はない）と、DOMの読み込みが完了した後の緑色の線（画像）。したがって、ブラウザはすでにあなたがしたいことを正確に実行しています。ただし、2点間の距離は約100msしかないため、画像が多い場合を除いて、意識的にこれを確認することはおそらくないでしょう。

唯一重要なことは、JavaScriptでページの読み込みをロックしないことです。これにより、ページの読み込みが大幅に高速化されます（たとえば、ページの読み込みが完了した後に、ページに動的に挿入してほとんどのjavascriptを読み込むことにより）。いずれにせよ、最適化は、Firefox（Firebugを使用してネットタブに移動）またはChrome（F12キーを押してネットワークタブに移動）のいずれかでページロードのウォーターフォール（上の画像）を確認することで大きなメリットがあります。青い線をできるだけ左に動かそうとすると、が読み込まれます。

于 2012-06-04T13:08:45.113 に答える
1

これを試してください： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function Addimg()
{
    document.getElementById("googleimg").src = "http://www.google.com/images/srpr/logo3w.png";
}
</script>
</head>

<body onload="Addimg()">
<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img id="googleimg" src=""><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>
</body>

</html>
于 2012-06-05T06:34:30.820 に答える
1

さらにもう1つ：

これを試して

HTML：

<div id="google-search-container">
    <form method="get" action="//www.google.com/search">
        <div id="google-logo"></div>
        <input id="q" name="q" />
        <input type="submit" value="Google Search" />
    </form>
</div>

JavaScript：

function addLogo() {
    document.getElementById('google-logo').style.backgroundImage = "url('//www.google.com/images/srpr/logo3w.png')";
}
window.onload = function() {
    addLogo();
}

CSS：

#google-search-container {
    text-align: center
}
#google-logo {
    margin: 10px auto;
    background-repeat: no-repeat;
    background-size:275px 95px;
    height: 95px;
    width: 275px
}
#q {
    width: 300px
}
于 2012-06-06T23:30:56.673 に答える