Question

我继承了一个维护网站，使用覆盖真实地图的html地图将特定国家/地区与特定网页相关联。

之前它加载了默认的地图图像，然后使用一些javascript，它会将图像src更改为鼠标悬停时具有不同颜色的特定国家/地区的图像，并将图像源重置为鼠标输出时的原始图像

使维护（添加新国家/地区）更容易我通过利用div标签的一些CSS使初始地图成为背景图像，然后为每个国家创建新图像，这些国家只有那些国家/地区高亮，以便图像保持相当小

这很有效，但有一个问题在较慢的互联网连接上特别明显

当您将鼠标悬停在某个国家/地区时，如果您的浏览器缓存中没有该图像文件或已将其下载，则不会加载该图像，除非您将鼠标悬停在另一个国家/地区然后返回到第一个国家/地区 - 我想这是由于图像首次悬停时手动下载。

我的问题：是否有可能在页面和所有其他资产加载完成后强制加载这些额外的图像，以便这种行为几乎被消除？

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请求）我们正在HTML的底部加载Jquery，如果有人想知道为什么它从代码片段中丢失了

供参考，可在此处找到包含相关地图的页面：http://www.motoquest.com/guided-motorcycle-tours/

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

我当然为此做了一个 fiddle 。如果您在访问该页面时已启用网络调试面板，则可以在需要任何图像之前查看这些图像。

我写了preloadImages()，因此您可以根据需要多次调用它，并根据需要使用尽可能多的参数（1个或更多）。只需继续提供URL，它将继续预加载图像。您无需更改地图代码或网页上的任何其他内容。

我建议您首先尝试加载最大的国家/地区，因为这些是最容易（并且最有可能）被淘汰的国家。

Answer 2

1）至于你的真实例子 - 最好在SVG + JS上用许多<path>创建地图。你需要的工具：jQuery，svgweb（fir IE8-），世界矢量地图。在这种情况下，您无需加载任何图像（SVG可以内嵌在html中，也可以像here一样在飞行中创建）。所有悬停事件都写在JS上，只更改所有SVG树的1个属性。

SVG有链接，它们像HTML链接一样工作。

2）您可以为悬停创建国家精灵（或包含所有悬停状态+地图的一个精灵）。必须预先加载悬停状态（通过将此图像包含为background-position:-5000px 0;或JS-preload的某个元素的背景）。我的意思是每个悬停状态只包含一个没有完整地图的国家。

这种情况下的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);

<强>更新

对于你的具体问题：

是。

您正在等待$(window).on('load') =所有HTML（包含所有组件，如图片，CSS，flash，内部脚本）已加载
预加载所有图片

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

如果您还有其他要加载的内容，则可以在延迟时构建系统。

如何提高加载新叠加图像的地图的性能

2 个答案: