javascript - 预加载图像的最佳方式-6ren

javascript - 预加载图像的最佳方式

转载作者：数据小太阳更新时间：2023-10-29 04:19:54

预加载图像的最佳方式是什么？我正在尝试创建一个包含大约 59 张 png 图像的图像选项卡。这是我到目前为止的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>Checklist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
    <style type="text/css">
      #innerframe {
                width: 100%;
                height: 63em;
        }
    </style>
    <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>    
    <script type="text/javascript">    

      var id1 = new Image();
      id1.src = "images/id1.png";

      var id11 = new Image();
      id11.src = "images/id1-1.png";

      var id12 = new Image();
      id12.src = "images/id1-2.png";

      var id13 = new Image();
      id13.src = "images/id1-3.png";  

      var id2 = new Image();
      id2.src = "images/id2.png";

      var id21 = new Image();
      id21.src = "images/id2-1.png";

      var id22 = new Image();
      id22.src = "images/id2-2.png";

      var id23 = new Image();
      id23.src = "images/id2-3.png";    

      var id3 = new Image();
      id3.src = "images/id3.png";

      var id31 = new Image();
      id31.src = "images/id3-1.png";

      var id32 = new Image();
      id32.src = "images/id3-2.png";

      var id33 = new Image();
      id33.src = "images/id3-3.png";       

      var id4 = new Image();
      id4.src = "images/id4.png";

      var id41 = new Image();
      id41.src = "images/id4-1.png";

      var id42 = new Image();
      id42.src = "images/id4-2.png";

      var id43 = new Image();
      id43.src = "images/id4-3.png"; 

      var iw1 = new Image();
      iw1.src = "images/iw1.png"

      var iw11 = new Image();
      iw11.src = "images/iw1-1.png"

      var iw12 = new Image();
      iw12.src = "images/iw1-2.png"

      var iw13 = new Image();
      iw13.src = "images/iw1-3.png"

      var iw14 = new Image();
      iw14.src = "images/iw1-4.png"

      var iw2 = new Image();
      iw2.src = "images/iw2.png"

      var iw21 = new Image();
      iw21.src = "images/iw2-1.png"

      var iw22 = new Image();
      iw22.src = "images/iw2-2.png"

      var iw23 = new Image();
      iw23.src = "images/iw2-3.png"

      var iw24 = new Image();
      iw24.src = "images/iw2-4.png"  

            var iw3 = new Image();
      iw3.src = "images/iw3.png"

      var iw31 = new Image();
      iw31.src = "images/iw3-1.png"

      var iw32 = new Image();
      iw32.src = "images/iw3-2.png"

      var iw33 = new Image();
      iw33.src = "images/iw3-3.png"

      var iw34 = new Image();
      iw34.src = "images/iw3-4.png"  

      var iw4 = new Image();
      iw4.src = "images/iw4.png"

      var iw41 = new Image();
      iw41.src = "images/iw4-1.png"

      var iw42 = new Image();
      iw42.src = "images/iw4-2.png"

      var iw43 = new Image();
      iw43.src = "images/iw4-3.png"

      var iw44 = new Image();
      iw44.src = "images/iw4-4.png"      

      var im1 = new Image();
      im1.src = "images/im1.png"

      var im11 = new Image();
      im11.src = "images/im1-1.png"

      var im12 = new Image();
      im12.src = "images/im1-2.png"

      var im13 = new Image();
      im13.src = "images/im1-3.png"

      var im2 = new Image();
      im2.src = "images/im2.png"

      var im21 = new Image();
      im21.src = "images/im2-1.png"

      var im22 = new Image();
      im22.src = "images/im2-2.png"

      var im23 = new Image();
      im23.src = "images/im2-3.png"

      var im3 = new Image();
      im3.src = "images/im3.png"

      var im31 = new Image();
      im31.src = "images/im3-1.png"

      var im32 = new Image();
      im32.src = "images/im3-2.png"

      var im33 = new Image();
      im33.src = "images/im3-3.png"

      function changeFrame (frameSRC)
      {
        var myFrame = document.getElementById('fraContent'); 
        myFrame.contentWindow.location =  frameSRC;
      }

      function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
      {
        $("#imgTab").attr("src", orgImgSrc);
        $(area).hover(
          function()
            {
              $("#imgTab").attr("src", tgtImgSrc);
              $("#imgTab").css("cursor",tgtCursor);
            },
          function()
            {
              $("#imgTab").attr("src", orgImgSrc);
              $("#imgTab").css("cursor",orgCursor);
             }
        );
      }

      /*function initLoad ()
      {
      }*/

      function changeImgState(img) // tab interface of Day Week and Month arrows
      {
        var myImgTab = document.getElementById("imgTab");

        switch (img)
        {
          case 'id1':

            myImgTab.src = id1.src;

            // Rollover effect for the image
            rolloverArea("#area1",id1.src,id1.src,"auto","auto");
            rolloverArea("#area2",id1.src,id11.src,"auto","pointer");
            rolloverArea("#area3",id1.src,id12.src,"auto","pointer");
            rolloverArea("#area4",id1.src,id13.src,"auto","pointer");
            rolloverArea("#area5",id1.src,id1.src,"auto","auto");

            // onClick effect
            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area3").click(function() {
              $("#innerframe").attr("src","D3.html");
              changeImgState("id3");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;
          case 'id2':

            myImgTab.src = id2.src;

            // Rollover effect for the image
            rolloverArea("#area1",id2.src,id21.src,"auto","pointer");
            rolloverArea("#area2",id2.src,id2.src,"auto","auto");
            rolloverArea("#area3",id2.src,id22.src,"auto","pointer");
            rolloverArea("#area4",id2.src,id23.src,"auto","pointer");
            rolloverArea("#area5",id2.src,id2.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id1");
              }
             );

             $("#area3").click(function() {
              $("#innerframe").attr("src","D3.html");
              changeImgState("id3");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'id3':

            myImgTab.src = id3.src;

            // Rollover effect for the image
            rolloverArea("#area1",id3.src,id31.src,"auto","pointer");
            rolloverArea("#area2",id3.src,id32.src,"auto","pointer");
            rolloverArea("#area3",id3.src,id3.src,"auto","auto");
            rolloverArea("#area4",id3.src,id33.src,"auto","pointer");
            rolloverArea("#area5",id3.src,id3.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id3");
              }
             );

            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'id4':

            myImgTab.src = id4.src;

            // Rollover effect for the image
            rolloverArea("#area1",id4.src,id41.src,"auto","pointer");
            rolloverArea("#area2",id4.src,id42.src,"auto","pointer");
            rolloverArea("#area3",id4.src,id43.src,"auto","pointer");
            rolloverArea("#area4",id4.src,id4.src,"auto","auto");
            rolloverArea("#area5",id4.src,id4.src,"auto","auto");

            // onClick effect
            $("#area1").click(function() {
              $("#innerframe").attr("src","D1.html");
              changeImgState("id3");
              }
             );

            $("#area2").click(function() {
              $("#innerframe").attr("src","D2.html");
              changeImgState("id2");
              }
             );

             $("#area4").click(function() {
              $("#innerframe").attr("src","D4.html");
              changeImgState("id4");
              }
             );

            break;

          case 'iw1':

            myImgTab.src = iw1.src;

            rolloverArea("#area1",iw1.src,iw1.src,"auto","auto");
            rolloverArea("#area2",iw1.src,iw11.src,"auto","pointer");
            rolloverArea("#area3",iw1.src,iw12.src,"auto","pointer");
            rolloverArea("#area4",iw1.src,iw13.src,"auto","pointer");
            rolloverArea("#area5",iw1.src,iw14.src,"auto","pointer");

            break;
          case 'im1': 

            myImgTab.src = im1.src;

            rolloverArea("#area1",im1.src,im1.src,"auto","auto");
            rolloverArea("#area2",im1.src,im11.src,"auto","pointer");
            rolloverArea("#area3",im1.src,im12.src,"auto","pointer");
            rolloverArea("#area4",im1.src,im13.src,"auto","pointer");
            rolloverArea("#area5",im1.src,im1.src,"auto","auto");           
            break;
        }

      } 

      function changeTab(tab)
      {   
        switch(tab)     
        {
          case 'day1':
            var myTab = document.getElementById("day1");

            document.getElementById("week1").className = "active";
            document.getElementById("month1").className = "active";        
            myTab.className = "current"; 

            changeImgState("id1");
            $("#innerframe").attr("src","D1.html");

            break; 
          case 'week1':
            document.getElementById("day1").className = "active";
            document.getElementById("month1").className = "active";         
            document.getElementById("week1").className = "current";

            changeImgState("iw1");
            $("#innerframe").attr("src","W1.html");

            break;
          case 'month1':
            document.getElementById("week1").className = "active";
            document.getElementById("day1").className = "active";         
            document.getElementById("month1").className = "current";

            changeImgState("im1");
            $("#innerframe").attr("src","M1.html");

            break;
        }  

      }

      function test(tab)
      {
        alert(document.getElementById.id + " " + document.getElementById(tab).className)
      }
    </script>

  </head>
  <body onload="changeTab('day1');">
  <table border="0" width="100%">
  <tr>
    <td colspan="2" align="left">
      <div id="navcontainer">
        <ul id="navlist">
          <li><a class="active" id="day1" onclick="changeTab('day1');">FIRST DAY</a></li>
          <li><a class="active" id="week1" onclick="changeTab('week1');">FIRST WEEK</a></li>
          <li><a class="active" id="month1" onclick="changeTab('month1');">FIRST 30-DAYS</a></li>
        </ul>
      </div>
      <div id="page_viewer">
          <table border="0" width="1020px" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <img src="" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab" id="imgTab">
                <map id="imgTabMap" name="imgTabMap">
                  <area shape="rect" alt="" title="" coords="7,11,166,60" id="area1">
                  <area shape="rect" alt="" title="" coords="206,10,365,59" id="area2">
                  <area shape="rect" alt="" title="" coords="405,11,566,59" id="area3">
                  <area shape="rect" alt="" title="" coords="605,10,763,60" id="area4">
                  <area shape="rect" alt="" title="" coords="805,9,963,60" id="area5">
                  <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
                </map>

            </td>
          </tr>
          <tr>
            <td width="100%">
              <iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" width="1000px"></iframe>
            </td>
          </tr>
          </table>
      </div>
      </td>
    </tr>
  </table>
  </body>
</html>

问题是现在我的页面需要一段时间才能加载，而且我不明白为什么单击选项卡似乎加载 iframe 很慢。加载 iframe 的 src 是否会导致再次预加载图像？在页面打开时加载相关图像而不是在点击时加载它们会更好吗？

我还找到了一个很好的替代方案，即 lieldulev 的并行加载脚本 (imagesQueue)但我不知道如何使用它。

顺便说一句，我不太精通 JavaScript，所以我正在努力边工作边学习。现在，我正在做的是实现我研究的技术并试图理解它们的功能，因此我的编码不像我希望的那样干净，有时甚至只是使用低效的“蛮力”代码以获得所需的效果。不过，我想对此进行改进，我们将不胜感激。

关于并行缓存脚本，这是我根据 Nick 的演示设置的测试页面:

        <html> 
        <head> 
            <title>liel's smij dev page</title> 
            <style type="text/css"> 
                #m1{
                    width:400px;
                    height:300px;
                    background-color:#adf;
                }
                canvas{
                    width:100%;
                    height:100%;
                }
                #show_me{float:left;width:100px;}
                #console_log{font-size:10px;float:right;}
            </style> 
            <script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/imagesQueue.js"></script> 
        </head> 
        <body> 
                <h1>imagesQ(ueue.js) Demo</h1> 
                <!-- <img id="show_me" src="images/id1.png"> -->
                <img id="show_me" alt="">
                <div id="console_log">Log:</div> 
                <script type="text/javascript"> 
                    /*
                        imagesQueue Usage Example:
                    */
                    // the img element to show
                    show_img = document.getElementById('show_me');
                    log_e = document.getElementById('console_log');
                    log = function(output){log_e.innerHTML +='<br/>'+(output)};
                    imagesQueue = imagesQ;
                    // On every image loaded show progress:
                    imagesQueue.onLoaded = function()
                    {
                        show_img.src = imagesQueue.current.src;
                        var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)";
                        log(output);
                    }
                    // When done say so.
                    imagesQueue.onComplete = function()
                    {
                        QueuesCompleteAll();
                    }
                    log('Q1 Queued 10 images (queue_images)');
                    var now =(new Date).getTime(); // make sure to get non-cached images
                    imagesQueue.queue_images(['images/id1.png'+now,
                                              'images/id1-1.png'+now,
                                               'images/id1-2.png'+now,
                                               'images/id1-3.png'+now,
                                                'images/id2.png'+now,
                                                'images/id2-1.png'+now,
                                                'images/id2-2.png'+now,
                                                'images/id2-3.png'+now,
                                                'images/id3.png'+now,
                                                'images/id3-1.png'+now]); 

                    log('Starting the queue (process_queue)');
                    var start = (new Date).getTime();
                    imagesQueue.process_queue();
                    log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.');
                    function QueuesCompleteAll(){
                        var diff = (new Date).getTime() - start;
                        log('All Done ('+diff+'ms)');
                    }
                </script> 
        </body> 
</html>

目前，我无法让它工作 :( 我上传了 imagesQueue 脚本并将其链接到页面，并将原始演示页面中的图像值替换为我的开发站点中的图像值。

最佳答案

你的想法很好，当你想在点击时有一个流畅的图像变化。虽然脚本是用纯 javascript 编码的(您可以使用更方便的方法:http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript)，但它不应该对性能产生如此大的影响。也许原因在别处。也许你的图片太重了……

除 javascript 之外的另一种解决方案是使用纯 CSS 方法，我想它会快得多。尝试将所有图像放在单个 PNG 上，并在 CSS 中尝试操纵各个选项卡的背景位置值。例如:

.tab {
    background-image:url('single.png');
}
#tab5 {
    background-position: 10px 20px;
}
#tab5:hover {
    background-position:10px 25px;
}

这样一来，所有图片都将一次加载一次。

关于javascript - 预加载图像的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6150070/

文章推荐： c# - 解析 "querystring"格式数据的最简单方法

文章推荐： c# - 打开项目时找不到 Microsoft.CompactFramework.CSharp.targets

c - 在英特尔 x64 汇编中执行函数的最快(CPU 方式)方式？
我一直在阅读有关汇编函数的内容，但对于是使用进入和退出还是仅使用调用/返回指令来快速执行，我感到很困惑。一种方式快而另一种方式更小吗？例如，在不内联函数的情况下，在汇编中执行此操作的最快(stdcal
解析元组的 Pythonic 方式
我正在处理一个元组列表，如下所示: res = [('stori', 'JJ'), ('man', 'NN'), ('unnatur', 'JJ'), ('feel', 'NN'), ('pig',
使用线程的 Pythonic 方式
最近我一直在做很多网络或 IO 绑定(bind)操作，使用线程有助于加快代码速度。我注意到我一直在一遍又一遍地编写这样的代码: threads = [] for machine, user, data
请求资源子集的 RESTful 方式
假设我有一个名为 user_stats 的资源，其中包含用户拥有的帖子、评论、喜欢和关注者的数量。是否有一种 RESTful 方式只询问该统计数据的一部分(即，对于 user_stats/3，请告诉我
接受选择的 RESTful 方式
我有一个简单的 api，它的工作原理是这样的: 用户创建一个请求 ( POST /requests ) 另一个用户检索所有请求 ( GET /requests ) 然后向请求添加报价 ( POST /
扩展构建器模式的 Pythonic 方式
考虑以下 CDK Python 中的示例(对于这个问题，不需要 AWS 知识，这应该对基本上任何构建器模式都有效，我只是在这个示例中使用 CDK，因为我使用这个库遇到了这个问题。): from aws
用于管理对象池的 Scala 方式
Scala 中管理对象池的首选方法是什么？我需要单线程创建和删除大规模对象(不需要同步)。在 C++ 中，我使用了静态对象数组。在 Scala 中处理它的惯用和有效方法是什么？最佳答案我会把它
将多个类方法应用于对象列表的 Pythonic 方式
我有一个带有一些内置方法的类。这是该类的抽象示例: class Foo: def __init__(self): self.a = 0 self.b = 0
返回和检查方法执行的 Pythonic 方式
返回和检查方法执行的 Pythonic 方式我目前在 python 代码中使用 golang 编码风格，决定移动 pythonic 方式例子: import sys from typing imp
处理丢失数据的 RESTful 方式
我正在开发一个 RESTful API。其中一个 URL 允许调用者通过 id 请求特定人员的记录。返回该 id 不存在的记录的常规值是什么？服务器是否应该发回一个空对象或者一个 404，或者其他什
加载具有相似文件名的文件的 Pythonic 方式
我正在使用 pathlib.Path() 检查文件是否存在，并使用 rasterio 将其作为图像打开. filename = pathlib.Path("./my_file-name.tif") 但
创建嵌套字典的 Pythonic 方式
我正在寻找一种 Pythonic 方式来从列表和字典创建嵌套字典。以下两个语句产生相同的结果: a = [3, 4] b = {'a': 1, 'b': 2} c = dict(zip(b, a))
处理异常后恢复的 Pythonic 方式
我有一个正在操裁剪理设备的脚本。设备有时会发生物理故障，当它发生时，我想重置设备并继续执行脚本。我有这个: while True: do_device_control() device
做组合别名的 Pythonic 方式
做组合别名的最pythonic和正确的方法是什么？这是一个假设的场景: class House: def cleanup(self, arg1, arg2, kwarg1=False):
在一个请求中创建多个项目的 RESTful 方式
我正在开发一个小型客户端服务器程序来收集订单。我想以“REST(ful)方式”来做到这一点。我想做的是: 收集所有订单行(产品和数量)并将完整订单发送到服务器目前我看到有两种选择: 将每个订单行发
动态调用静态方法的 Groovy 方式
我知道在 Groovy 中您可以使用字符串调用类/对象上的方法。例如: Foo."get"(1) /* or */ String meth = "get" Foo."$meth"(1) 有没有办法
复制没有不同属性的字典的 Pythonic 方式
在 ECMAScript6 中，您可以使用扩展运算符来解构这样的对象 const {a, ...rest} = obj; 它将 obj 浅拷贝到 rest，不带属性 a。有没有一种干净的方法可以在
函数中条件返回的 Pythonic 方式
我有几个函数返回数字或None。我希望我的包装函数返回第一个不是 None 的结果。除了下面的方法之外，还有其他方法吗？ def func1(): return None def func2(
处理资源之间双向关系的 RESTful 方式
假设我想设计一个 REST api 来讨论歌曲、专辑和艺术家(实际上我就是这样做的，就像我之前的 1312414 个人一样)。歌曲资源始终与其所属专辑相关联。相反，专辑资源与其包含的所有歌曲相关联。
有条件地使用上下文管理器的 Pythonic 方式
这是我认为必须经常出现的问题，但我一直无法找到一个好的解决方案。假设我有一个函数，它可以作为参数传递一个开放资源(如文件或数据库连接对象)，或者需要自己创建一个。如果函数需要自己打开文件，最佳实践通常

数据小太阳

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 预加载图像的最佳方式