2

私は、特定の国を特定のページにリンクするために実際の地図をオーバーレイするhtmlマップを使用する維持するWebサイトを継承しました。

以前はデフォルトの地図画像をロードしていましたが、JavaScriptを使用すると、画像srcがマウスオーバー時に特定の国の異なる色の画像に変更され、マウスアウト時に画像ソースが元の画像にリセットされます。

メンテナンス（新しい国の追加）を簡単にするために、divタグにCSSを使用して初期マップを背景画像にし、その国だけが強調表示されている国ごとに新しい画像を作成して、画像をかなり小さくしました。

これはうまく機能しますが、低速のインターネット接続で特に目立つ問題が1つあります。

ある国にカーソルを合わせたときに、ブラウザのキャッシュに画像ファイルがないかダウンロードしていない場合、別の国にカーソルを合わせて最初の国に戻らない限り、画像は読み込まれません。これは、画像を手動で作成する必要があるためだと思います。最初のホバーでダウンロード。

私の質問：ページと他のすべてのアセットの読み込みが完了した後にこれらの余分な画像の読み込みを強制して、この動作をほとんど排除することは可能ですか？

MAPのhtmlコードは次のとおりです。

    <div class="gtmap"><img id="Image-Maps_6200909211657061" src="<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png" usemap="#Image-Maps_6200909211657061" alt="We offer Guided Motorcycle Tours all around the world" width="615" height="296" />
<map id="_Image-Maps_6200909211657061" name="Image-Maps_6200909211657061">
<area shape="poly" coords="511,134,532,107,542,113,520,141" href="/guided-motorcycle-tours-japan/" alt="Guided Japan Motorcycle Tours" title="Japan" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-japan.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />

<area shape="poly" coords="252,61,266,58,275,64,262,68" href="/guided-motorcycle-tour.php?iceland-motorcycle-adventure-39" alt="Guided Iceland Motorcycle Tours" title="Iceland"
onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-iceland.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />

<area shape="poly" coords="587,246,597,256,577,279,568,270" href="/guided-motorcycle-tour.php?new-zealand-south-island-adventure-10" alt="New Zealand Guided Motorcycle Tours" title="New Zealand" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-nz.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="418,133,412,145,412,154,421,178,430,180,430,166,443,154,443,145,438,144,433,142,430,138,431,130,430,129,425,128" href="/guided-motorcycle-tours-india/" alt="India Guided Motorcycle Tours" title="India" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-india.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="460,152,466,149,474,165,470,171,466,161" href="/guided-motorcycle-tours-laos/" alt="Laos Guided Motorcycle Tours" title="Laos" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-laos.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="468,179,475,166,468,152,475,152,482,169" href="/guided-motorcycle-tour.php?indochina-motorcycle-adventure-tour-32" onClick="javascript: pageTracker._trackPageview('/internal-links/guided-tours/map/vietnam');" alt="Vietnam Guided Motorcycle Tours" title="Vietnam" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-viet.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="330,239,337,235,347,226,352,233,351,243,344,250,335,253,327,255,323,249,322,242,323,241" href="/guided-motorcycle-tours-southafrica/" alt="South Africa Guided Motorcycle Tours" title="South Africa" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-sa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="290,77,293,86,298,96,286,102,285,97,285,89,282,84,282,79" href="/guided-motorcycle-tour.php?great-britain-isle-of-man-scotland-wales-uk-18" alt="United Kingdom" title="United Kingdom Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-uk.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="357,118,368,118,369,126,345,129,338,125,338,117,342,115,348,116" href="/guided-motorcycle-tour.php?explore-turkey-adventure-45" alt="Turkey" title="Turkey Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-turkey.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="206,95,193,101,185,101,178,106,165,111,157,109,147,105,134,103,121,103,107,103,96,103,86,104,81,99,77,91,70,83,62,79,60,72,61,64,59,57,60,51,71,50,83,49,95,50,107,54,117,53,129,47,137,36,148,37,163,38,177,44,187,54,195,60,184,72,191,80,200,87" href="/guided-motorcycle-tours-canada/" alt="Guided Canada Motorcycle Tours" title="Canada" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-canada.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="61,75,60,62,60,55,59,44,51,44,43,43,36,42,28,43,23,48,17,51,15,62,19,74,27,79,19,83,16,93,35,83,43,77,50,75,55,75" href="/guided-motorcycle-tours-alaska/"  alt="Guided Alaska Motorcycle Tours" title="Alaska" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-alaska.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="82,101,99,101,133,101,148,105,161,110,172,106,187,100,180,113,171,122,165,131,159,149,147,141,137,140,129,147,120,141,112,138,103,137,93,132,86,122,86,112,86,106" href="/guided-motorcycle-tours-usa/" alt="USA Guided Motorcycle Tours" title="USA" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-usa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="178,225,180,214,175,208,174,204,178,198,174,193,167,192,157,199,158,204,164,211,167,218" href="/guided-motorcycle-tour.php?peru-machu-picchu-adventure-25" alt="Peru Guided Motorcycle Tours" title="Peru" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-peru.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="172,226,169,239,166,256,166,267,164,279,171,277,174,262,175,250,179,234,180,225,176,224" href="/guided-motorcycle-tours-chile/" alt="Guided Chile Motorcycle Tours" title="Chile" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-chile.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
<area shape="poly" coords="199,260,194,261,187,265,184,276,183,296,170,292,168,282,174,270,174,257,177,245,180,230,190,228,205,237,199,245" href="/guided-motorcycle-tours-argentina/" alt="Guided Argentina Motorcycle Tours" title="Argentina" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-arg.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" />
</map>
</div>

これ<?php echo cdnhttpsCheck(); ?>は、構成ファイルから正しいWebドメイン/ URLを取得して、可能な場合はCDNからリソースをロードするサイト固有の関数です（たとえば、すべての非HTTPSリクエスト）。コードスニペットから

参考までに、問題の地図のページはここにあります：http ://www.motoquest.com/guided-motorcycle-tours/

4

2 に答える 2

1

1）実際の例としては、SVG+JS上に多く<path>のsを使用してマップを作成することをお勧めします。必要なツール：jQuery、svgweb（fir IE8-）、ワールドベクターマップ。この場合、画像をロードする必要はありません（SVGはhtmlでインラインにすることも、ここのようにオンザフライで作成することもできます）。すべてのホバーイベントはJSに書き込まれ、すべてのSVGツリーの1つの属性のみを変更します。

SVGにはリンクがあり、HTMLリンクのように機能します。

2）ホバーする国のスプライト（またはすべてのホバー状態とマップを含む1つのスプライト）を作成できます。ホバー状態はプリロードする必要があります（JSプリロードを使用するか、JSプリロードによってこの画像を要素の背景として含めることbackground-position:-5000px 0;により）。つまり、各ホバー状態には、完全なマップのない1つの国しか含まれていません。

この場合のHTML構造は次のようになります。

<div style="position:relative;"><!-- This div has main MAP without countries -->
  <div style="position:absolute;top:40px;left:50px;width:200px;height:170px;"></div><!-- for example div for Canada with Canada hover state -->
  ...
  <div style="position:absolute;top:0px;left:0px;right:0;"><img/></div><!-- overlay DIV with big transparent image and your areas -->
</div>

3）以前にすべての画像をプリロードします。

HTMLによる：

<div style="height:0;overflow:hidden;"><img/><img/><img/><img/><img/></div>

またはJSによる：

var Img = $( document.createElement('img') );
Img.attr('src',path_to_image);

アップデート

あなたの具体的な質問のために：

はい。

  1. 待ってい$(window).on('load')ます=すべてのHTML（画像、CSS、フラッシュ、スクリプトなどのすべてのコンポーネントが含まれています）が読み込まれます
  2. すべての画像をプリロードする
$(window).on('load',function(){
 var Img = [], List = []; // List of your preload images
 for(var i=0;i<List.length;i++){
  Img[i] = $( document.createElement('img') );
  Img[i].attr('src',List[i]);
 }
});

ロードするものが他にある場合は、据え置きでシステムを構築できます。

于 2012-11-12T18:23:54.590 に答える
1

ブラウザに画像をプリロードすることで、状況を改善できます。ユーザーが何かの上にマウスを置く前に、ほとんどの画像が受信されることを願っています。画像が表示に必要になる前にプリロードされている場合、ユーザーがその国にマウスを置いたときに遅延が発生することはありません。

これを行うための簡単で信頼できる方法は次のとおりです。

var preloadedImages = [];

function preloadImages() {
    for (var idx = 0; idx < arguments.length; idx++) {
        var oneImage = new Image()
        oneImage.src = arguments[idx];
        preloadedImages.push(oneImage);
    }

}

preloadImages('http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-alaska.png',
    'http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-canada.png',
    'http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-usa.png'
    // and all the rest of them
);

もちろん、私はこれのためにフィドルを作りました。ページにアクセスしたときにネットワーク デバッグ パネルが表示されている場合は、イメージが必要になる前にイメージが要求されていることがわかります。

preloadImages()必要な数のパラメーター (1 つ以上) を使用して、必要な回数だけ呼び出すことができるように記述しました。URL をフィードし続けるだけで、画像がプリロードされ続けます。ページのマップ コードやその他のものを変更する必要はありません。

最初に最大の国を読み込んでみることをお勧めします。これは、マウスオーバーが最も簡単な (そして最も可能性が高い) 国であるためです。

于 2012-11-12T16:52:38.880 に答える