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

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

javascript jquery html css

Javascript 加载仅包含在一个DIV中的所有图像,javascript,jquery,html,css,imagemap,Javascript,Jquery,Html,Css,Imagemap,我希望我的HTML页面像正常一样加载，但我希望页面的一个部分在检索到该部分的所有图像（静态和滚动）后才能完全加载我用图像贴图和多边形形状创建了这个贴图。当用户滚动到某个状态时，将加载一个全新的映射，但它会创建一个外观，即仅重新加载该映射的该部分。我以前没有见过这样做，因为改变图像或图像地图上的颜色是不可能的，所以我不得不这样做以下是该页面的链接：正如您所见，滚动图像在每个状态上加载需要一段时间。。。但一旦它们都被加载，地图就可以完美地工作了。我希望在地图出现之前加载所有图像。如何使用Jav

我希望我的HTML页面像正常一样加载，但我希望页面的一个部分在检索到该部分的所有图像（静态和滚动）后才能完全加载

我用图像贴图和多边形形状创建了这个贴图。当用户滚动到某个状态时，将加载一个全新的映射，但它会创建一个外观，即仅重新加载该映射的该部分。我以前没有见过这样做，因为改变图像或图像地图上的颜色是不可能的，所以我不得不这样做

以下是该页面的链接：

正如您所见，滚动图像在每个状态上加载需要一段时间。。。但一旦它们都被加载，地图就可以完美地工作了。我希望在地图出现之前加载所有图像。如何使用JavaScript实现这一点

谢谢

使用“图像”对象。应该是这样的：

<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>


var mouseoverImg=新图像（120,90）；
mouseoverImg.src=“img2.gif”；
var mousedownImg=新图像（120,90）；
mousedownImg.src=“img3.gif”；

假设文档中已经存在“img1.gif”。img2.gif在鼠标悬停时显示，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>


“图像”对象
var mouseoverImg=新图像（120,90）；
mouseoverImg.src=“img2.gif”；
var mousedownImg=新图像（120,90）；
mousedownImg.src=“img3.gif”；
“图像”对象


var img01=document.getElementById（“img01”）；
img01.addEventListener（“鼠标翻转”，滚动验证，错误）；
img01.addEventListener（“鼠标出”，滚动验证，错误）；
img01.addEventListener（“鼠标向下”，滚动验证，错误）；
var currentImg=“img1”；
函数滚动校验mg（e）{
如果（e.type==“鼠标悬停”）{
img01.src=mouseoverImg.src；
}否则如果（例如，类型==“鼠标输出”）{
img01.src=“img1.gif”；
}else if（e.type==“鼠标向下”）{
img01.src=mousedownImg.src；
}           
}

你可以使用一些随机按钮式的图片，你可以从某处下载；确保它们的名称为“img1.gif”、“img2.gif”和“img3.gif”。这个例子只是一个演示。您需要根据需要对其进行调整。

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

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属性

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

就像其他人已经指出的那样，通常的解决方案是预加载鼠标悬停图像。这是相当基本的，应该可以正常工作
但是，由于您有一个整个地图的图像，用于每个状态的鼠标覆盖状态，因此这对访问者的带宽不是很友好。在每个222KB时，这相当于
（50×222）/1024≈10.8MB仅用于加载站点。我建议你另找一个解决办法更新：我想到了我提出的解决方案中的一个错误。有关解决方案和详细信息，请参见答案的结尾如果您希望尽可能坚持使用当前的解决方案，我会做以下几点：将基础图像和图像贴图保持在适当的位置为鼠标悬停状态创建单独的图像，但仅裁剪为状态本身（而不是整个地图）找到每个鼠标上方图像的顶部和左侧坐标（相对于#mapContent div），并将其保存在一种命名集合中（在JavaScript中，它只是一个普通对象）该对象（或命名集合）可能如下所示： <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> var状态={ “新墨西哥州”：{ 前400名，左：300 }, “亚利桑那州”：{ top:350，左：250 }, }; 您的预加载程序可能如下所示： <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> 函数状态（）{ var状态，img； for（州中的州）{ img=新图像（）； img.src='/image/'+state+'.png'； states[state].img=$（img）.css({ 位置：'绝对'，顶部：状态[状态]。顶部，左：状态[状态]。左 }); } } 因为。。在
枚举对象中的键时，
状态
是键的名称（因此也是状态的名称）。我们将一个新的
对象（包装在jQuery对象中）保存到
状态
集合中（这样我们以后就可以访问它），并对其应用
顶部
和
左侧
位置
现在，要在鼠标上方向用户显示这些预加载的图像：

var currentState=null； var currentImage=null； $（“#图像地图区域”）。悬停( 函数（）{ var图像； var状态； currentState=$（this.attr（“id”）； //检索并显示预加载的图像： currentImage=states[currentState].img；//搜索网站中的JavaScript图像预加载这有助于我更快地加载图像吗？这只是显示滚动图像的另一种方式。通过这种方式，您可以加载鼠标悬停和/或鼠标向下以及页面其余部分显示的其他图像。这些广告