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

【问题标题】：How to improve performance of map that loads new overlay images如何提高加载新叠加图像的地图性能
【发布时间】：2016-11-17 00:41:39
【问题描述】：

我继承了一个要维护的网站，该网站使用覆盖真实地图的 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 请求）如果有人想知道为什么代码 sn-p 中缺少 Jquery，我们将在 HTML 底部加载 Jquery

作为参考，有问题的地图的页面可以在这里找到：http://www.motoquest.com/guided-motorcycle-tours/

【问题讨论】：

标签： javascript image jquery optimization

【解决方案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，它就会继续预加载图像。您无需更改地图代码或页面上的任何其他内容。

我建议您先尝试加载最大的国家/地区，因为这些国家/地区最容易（也最有可能）被鼠标悬停。

【讨论】：

这正是我所需要的，我只是将 preloadimages 函数添加到我的 JS 文件中，然后在 html 的页脚中调用它，如下所示：<script type="text/javascript"> $(document).ready(preloadImages('<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-alaska.png',....))</script> 当然最好做一个精灵或甚至 SVG，但这是一个很好的权宜之计，等待更广泛的重建

【解决方案2】：

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

SVG 有链接，它们的工作方式类似于 HTML 链接。

2) 您可以为悬停创建国家/地区的精灵（或一个包括所有悬停状态+地图的精灵）。悬停状态必须预先加载（通过将此图像包含为带有background-position:-5000px 0; 或通过JS-preload 的某些元素的背景）。我的意思是每个悬停状态只包含 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);

更新

对于您的具体问题：

是的。

您正在等待 $(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]);
 }
});

如果你有其他东西要加载，你可以在 deferreds 上构建系统。

【讨论】：