새 오버레이 이미지를로드하는지도의 성능을 향상시키는 방법

Question

나는 유지 관리하기 위해 특정 국가를 특정 페이지에 연결하기 위해 실제지도를 덮는 html지도를 사용하는 웹 사이트를 상속 받았습니다.

은 이전에 기본지도 이미지를로드 한 후 마우스 커서를 가져다 대면 다른 색으로 특정 국가와 이미지에 이미지 SRC를 변경하고 밖으로 마우스 원래의 이미지로 다시

를 이미지 소스를 재설정 할 자바 스크립트 일부와

유지 관리 (새로운 국가 추가하기) 더 쉽게 div 태그에 CSS를 사용하여 초기지도에 배경 이미지를 만든 다음 이미지가 상당히 작게 유지되도록 해당 국가의 광원 만있는 국가마다 새 이미지를 만들었습니다.

이 잘 작동하지만, 느린 인터넷 연결에 특히 눈에 띄는 하나의 문제를 프로그래머

브라우저 캐시에 이미지 파일을 해달라고하거나 마우스를하지 않는 한 실 거예요 이미지를로드 다운로드 한 경우 당신이 국가 위에 마우스를 올려

다른 나라와 다시 첫 번째 국가에 - 내가 생각하기에 이것은 수동으로 첫 번째 호버에 다운로드해야하는 이미지 때문입니다.

내 질문 : 페이지 및 기타 모든 애셋이 로딩을 마친 후에 이러한 추가 이미지의로드를 강제 할 수 있습니까?

<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(); ?>이 가능한 (CDN에서 리소스를로드 할 설정 파일에서 올바른 웹 도메인/URL을 가져옵니다 단지 사이트의 특정 기능입니다 : 다음과 같이

맵에 대한 HTML 코드는 그것은 코드 참조

에서 누락 된 이유를 사람이 궁금해하는 경우 예를 들어, 모든 비 HTTPS 요청) 우리는 HTML의 하단에 jQuery를로드하는 문제의지도 페이지는 여기있다 : http://www.motoquest.com/guided-motorcycle-tours/

,

Answer 1

이미지를 브라우저에 미리로드하여 상황을 개선 할 수 있습니다. 바라건대, 대부분의 이미지는 사용자가 무언가에 마우스를 올리기 전에 수신됩니다. 이미지가 표시되기 전에 미리로드 된 경우 사용자는 국가 전체에서 마우스를 움직일 때 어떤 지연도 보지 않아야합니다.

이 될 것이라고 할 수있는 간단하고 신뢰할 수있는 방법 : 나는 물론 이것에 대한 fiddle을 한

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을 계속 먹이면 이미지가 미리로드됩니다. 페이지에서지도 코드 또는 다른 것을 변경할 필요가 없습니다.

나는 사람들은 마우스를 올리면 할 수있는 가장 쉬운 (그리고 가장 가능성이) 사람이기 때문에 당신이 먼저 큰 나라를로드하려고 좋습니다. 실제 예로서

Answer 2

1) - 많은 <path>들과 SVG + JS에지도를 만들기 위해 더 좋을 것이다. 도구는 당신이 필요합니다 jQuery를, svgweb (전나무 IE8-), 세계 벡터지도입니다.이 경우 이미지를로드 할 필요가 없습니다 (SVG는 html로 인라인 될 수 있거나 here과 같은 파리에서 생성 될 수 있음). 모든 호버 이벤트는 JS에 쓰여지고 모든 SVG 트리의 오직 하나의 속성 만 변경합니다.

SVG에는 링크가 있으며 HTML 링크처럼 작동합니다.) 모든 국가 +지도를 가져 포함

---

2) 당신은 호버에 대한 국가의 스프라이트를 만들 수 있습니다 (또는 스프라이트. 마우스 오버 상태는 미리로드해야합니다 (이 이미지를 background-position:-5000px 0; 또는 JS 미리로드로 일부 요소의 배경으로 포함 시킴). 각 마우스 오버 상태에는 전체지도가없는 국가가 하나만 포함되어 있음을 의미합니다.

<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 구조는 같다. JS

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

을 OR로 : HTML으로

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

---

UPDATE 당신의 구체적인 질문에 대한

:

예.

1. 당신은 $(window).on('load')을 기다리고 있습니다 =
2. 예압을로드 (이미지, CSS, 플래시, 내부 스크립트 등의 모든 구성 요소) 모든 HTML 모든 이미지

---

$(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]); 
} 
}); 

당신이 만약 로드 할 다른 것을 가지고 있다면, 지연 시스템을 구축 할 수 있습니다.