2

我继承了一个网站来维护，该网站使用覆盖真实地图的 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/

4

2 回答 2

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 回答
1

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

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

2）您可以创建悬停国家的精灵（或一个包括所有悬停状态+地图的精灵）。悬停状态必须预先加载（通过将此图像包含为使用background-position:-5000px 0;JS-preload 或通过 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);

更新

对于您的具体问题：

是的。

  1. 您正在等待$(window).on('load')= 加载所有 HTML（包含所有组件，如图像、CSS、flash、内部脚本）
  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]);
 }
});

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

于 2012-11-12T18:23:54.590 回答