Question

我希望我的HTML页面像平常一样加载，但我希望页面的一部分在检索到该部分的所有图像（静态和翻转）后才完全加载。

我使用图像地图和多边形形状创建了这张地图。当用户翻转某个状态时，会加载一个全新的地图，但会创建仅重新加载该地图的该部分的外观。我之前没有看到这个，因为不可能在图像地图上更改图像或颜色，所以我必须这样做。

以下是该页面的链接：http://www.imaspy.com/unitedStatesMap.html

正如您所看到的，翻转图像需要一段时间来加载每个状态......但是一旦它们全部加载，地图就能完美地运行。我希望在地图出现之前加载所有图像。我怎么能用JavaScript做到这一点？

谢谢！

Answer 1

正如其他人已经指出的那样，通常的解决方案是预加载 mouseOver图像。这是非常基本的，RobG's answer应该可以正常工作。

但是，由于您有每个状态的mouseOver状态的整个地图的图像，因此对访问者的带宽不是很友好。每个222 KB，只需加载网站就可以(50 × 222) / 1024 ≈ 10.8 MB 。我建议你找另一个解决方案。

更新： 我想到了我提出的解决方案中的错误。有关解决方案和详细信息，请参阅答案的结尾。

如果你想尽可能地坚持当前的解决方案，这就是我要做的事情：

保留基本图像和图像映射。

为mouseOver状态创建单独的图像，但仅裁剪为状态本身（而不是整个地图）。

找到每个mouseOver图片的top和left坐标（相对于#mapContent div）并将其保存在一种命名集合（其中，在JavaScript中，只是一个普通的对象。）

该对象（或命名集合）可能如下所示：

var states = {
  'newMexico': {
    top:  400,
    left: 300
  },
  'arizona': {
    top:  350,
    left: 250
  },
};

您的预加载器可能如下所示：

function preloadStates() {
    var state, img;

    for (state in states) {
        img = new Image();
        img.src = '/image/' + state + '.png';
        states[state].img = $(img).css({
                    position: 'absolute',
                    top: states[state].top,
                    left: states[state].left
                });
    }
}

因为for .. in枚举了对象中的键，state是键的名称（因此是状态的名称）。我们将一个新的<img />对象（包装在jQuery对象中）保存到state集合中（以便稍后我们可以访问它），然后我们应用top和left个位置它。

现在，要在mouseOver上向用户显示这些预加载的图像：

var currentState = null;
var currentImage = null;

$("#imagemap area").hover(
    function () {
        var image;
        var state;

        currentState = $(this).attr("id");

        // Retrieve and show the preloaded Image:
        currentImage = states[currentState].img; // <-- wrapped in jQuery-object
        currentImage.appendTo('#mapContent');
    },
    function () {
        if (currentImage !== null) {
            currentImage.remove();
            currentImage = null;
        }
    }
);

这只是将预加载的图像附加到#mapContent div。不要忘记将#mapContent的{{1}}设置为position，否则图片的位置将相对于文档，而不是relative。

更新

我刚才想到了我提出的解决方案中的一个明显错误：

由于悬停图像将覆盖原始图像，因此只要显示悬停图像，#mapContent事件就会触发。在悬停图像而不是原始图像上收听mouseOut事件会绕过这一点，但会产生矩形命中区域。

幸运的是，有一个简单的解决方案：在原始图像（和悬停图像）的顶部添加透明图像，然后将mouseOut应用于该图像。

以下是概念证明：http://jsfiddle.net/PPvG/t8prx/

一些指示：



再次确保imagemap定位（相对或绝对）。

将透明图像绝对定位于#mapContent和top:0，并使其与原始图像完全一样高和宽。


确保透明图片的z-index至少为1（且高于悬停图像）：

#overlay {z-index：1;位置：绝对;顶部：0;左：0; }



使叠加层变为透明，方法是将其设为1px transparent gif或将其设为left:0。前者更具跨浏览器安全性。



我对疏忽表示歉意。： - ）

Answer 2

预加载图像的常用方法如下：

var preLoadedImages;

function preloadImages() {
  var img;
  var imageSources = ['01.jpg','02.jpg'];
  var i = imageSources.length;
  preLoadedImages = [];

  while (i--) {
    img = new Image();
    img.src = imageSources[i];
    preLoadedImages[i] = img;
  }
}

请注意，图像对象数组必须至少持续足够长的时间才能加载（和缓存）所有图像，因此使用全局图像来存储它们。您也许可以使用闭包。这也为您提供了一个方便的图像集合及其在其他函数中使用的src属性（例如交换图像）。

如果要在执行某些操作之前等待所有图像加载，可以为每个图像创建一个标志，然后在每个取消其标志的图像上放置一个加载侦听器。取消所有标志后，将加载所有图像。

Answer 3

使用'image'对象。它会是这样的：

<script type="text/javascript">
    var mouseoverImg = new Image(120, 90);
    mouseoverImg.src = "img2.gif";
    var mousedownImg = new Image(120, 90);
    mousedownImg.src = "img3.gif";
</script>

让我们假设文件中已经存在'img1.gif'。鼠标悬停时显示img2.gif，mousedown上显示img3.gif。您可以使用addEventListener或其他事件注册方法，就是这样。

好的，这是一个更详细的例子，但我留给你微调它。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>The 'image' Object</title>

    <style type="text/css">
    <!--

    -->
    </style>


    <script type="text/javascript">
        var mouseoverImg = new Image(120, 90);
        mouseoverImg.src = "img2.gif";
        var mousedownImg = new Image(120, 90);
        mousedownImg.src = "img3.gif";
    </script>

</head>

<body>
    <h1>The 'image' Object</h1>

    <p>
        <img id="img01" src="img1.gif" width="120" height="90"  
title="image 1" alt="Image 1" />
    </p>

    <script type="text/javascript">

        var img01 = document.getElementById("img01");
        img01.addEventListener("mouseover", rolloverImg, false);
        img01.addEventListener("mouseout", rolloverImg, false);
        img01.addEventListener("mousedown", rolloverImg, false);

        var currentImg = "img1";

        function rolloverImg(e) {
            if (e.type == "mouseover") {
                img01.src = mouseoverImg.src;
            } else if (e.type == "mouseout") {
                img01.src = "img1.gif";
            } else if (e.type == "mousedown") {
                img01.src = mousedownImg.src;
            }           
        }

    </script>

</body>
</html>

您可以使用一些随机按钮式图像，您可以从某处下载;确保它们被命名为“img1.gif”，“img2.gif”和“img3.gif”。这个例子只是一个演示。您需要根据自己的需要进行调整。

加载仅包含在一个DIV中的所有图像

3 个答案:

更新