Question

我使用JQuery＆＃34;幻灯片＆＃34;创建了一个动画。该功能翻转62个图像，速度设置为100毫秒。问题是，Chrome开发人员工具显示，该功能不断地为每个周期一次又一次地从服务器请求图像，而不是使用缓存。这些图片都具有相同的32.2 KB大小，并且具有相同的尺寸。网站上大约有20个这样的动画，你可以看到这里的测试版本：link。动画是20个小指标，位于页面中间的大蓝色区域。

代码如下：

<script type="text/javascript">      

function slideShow(id, index, imagePath, lastImage, fadeTime) {

     $('#slideShowBack'+id).show();
     index = (index == lastImage) ? 1 : index + 1;
     $("#slideShowBack"+id).attr("src", imagePath + "/" + index + ".png")
     setTimeout('slideShow(' + '"'+ id + '"' + ',' + index + ',' + '"'+ imagePath + '"' +', ' + lastImage + ', ' +  fadeTime + ')', fadeTime);
  }

   $(document).ready(function() {
     slideShow('SovSeng', 1, 'images', 62, 100);
    });
</script>
</head>
<body>
  <img id="slideShowBackSovSeng"  src="" />

我也试过了不同的方法这成功地只在第一个周期内请求来自服务器的图像，但是在第一个周期中，它在图像之间非常明显地闪烁/闪烁。

   <script type="text/javascript"> 

     var imagePath = "images";
     var lastImage = 62;
     var removeAfter = 100;

     function slideShow(index) {
        var url = imagePath + "/" + index + ".png";
        $("#slideShow").prepend($("<img/>").attr("src",url));
        $("#slideShow img:last").remove();
           setTimeout(function() {
              slideShow((index % lastImage) + 1)
           }, removeAfter);
     }

     $(document).ready(function() {
        setTimeout(function() { slideShow(1); }, removeAfter);
     });

  </script>
  </head>
  <body>
       <div id="slideShow">
          <img id="slideShow" src="images/1.png" />
       </div>

然后我尝试使用一个函数来预加载图像，这在Chrome中大部分时间都可以正常工作，但是刚刚加载页面后，幻灯片放映功能有时会随机开始从服务器直接获取图像，而不是预加载它们。我在幻灯片代码之前放置了预加载。预加载永远不适用于Firefox，Internet Explorer或Edge。我没有尝试过Safari。

<script type="text/javascript"> 

function preloadImages(array) {
   if (!preloadImages.list) {
      preloadImages.list = [];
   }
   var list = preloadImages.list;
   for (var i = 0; i < array.length; i++) {
      var img = new Image();
      img.onload = function() {
         var index = list.indexOf(this);
         if (index !== -1) {
            list.splice(index, 1);
         }
      }
      list.push(img);
      img.src = array[i];
   }
}

preloadImages(["images/1.png", "images/2.png", "images/3.png", etc.. ]); 

</script>

所以我的问题是我可以在第一个代码示例中停止我的功能，向服务器发出无限请求，或者我可以在第二个示例中改进我的代码，以便在第一次运行时停止闪烁/闪烁吗？

编辑：第一个代码示例中函数的图像请求的HTTP标头。

我不完全确定请求会绕过缓存，因为Chrome Dev Tools在第一次运行动画后显示传输的数据量实际上并没有增加。我在这里缺少的是，http请求被重定向到缓存吗？

    {
    "startedDateTime": "2017-04-11T21:05:11.260Z",
    "time": 0,
    "request": {
      "method": "GET",
      "url": "http://fiskervej.com/tody/images/31.png",
      "httpVersion": "unknown",
      "headers": [],
      "queryString": [],
      "cookies": [],
      "headersSize": -1,
      "bodySize": 0
    },
    "response": {
      "status": 200,
      "statusText": "OK",
      "httpVersion": "unknown",
      "headers": [
        {
          "name": "Date",
          "value": "Tue, 11 Apr 2017 21:02:44 GMT"
        },
        {
          "name": "Last-Modified",
          "value": "Wed, 05 Apr 2017 04:49:17 GMT"
        },
        {
          "name": "Server",
          "value": "Apache"
        },
        {
          "name": "Accept-Ranges",
          "value": "bytes"
        },
        {
          "name": "Content-Length",
          "value": "33266"
        },
        {
          "name": "Content-Type",
          "value": "image/png"
        }
      ],
      "cookies": [],
      "content": {
        "size": 33266,
        "mimeType": "image/png"
      },
      "redirectURL": "",
      "headersSize": -1,
      "bodySize": 0,
      "_transferSize": 0
    },
    "cache": {},
    "timings": {
      "blocked": -1,
      "dns": -1,
      "connect": -1,
      "send": 0,
      "wait": 0,
      "receive": 0,
      "ssl": -1
    },
    "serverIPAddress": "144.208.78.49",
    "pageref": "page_1"
  },

Answer 1

您是否尝试过服务器端和客户端缓存？我会两个都看看他们。

在执行任何javascript之前，DOM将首先加载所有方式，所以你可以做的是加载图像并使用CSS将它们隐藏起来，然后当脚本执行时，应该加载所有图像。

我研究了缓存动态加载的图片，并遇到了new Image() here

Answer 2

您误解了网络信息。图像已正确缓存。但是看看我们谈论的动画，基于DOM的JavaScript动画可能不是最好的选择。

尽管缺少明确的新鲜度信息，例如Cache-Control和Expires HTTP标头作为响应，浏览器仍然使用启发式新鲜度来缓存它。响应的bodySize等于0表示它来自缓存。您可以在Chrome Dev Tools网络选项卡的大小列中看到（来自磁盘缓存）标签。此外，一些请求可能会命中所谓的List of available images或内存缓存。

在我看来，在您的情况下，所有这些DOM操作都可以用单个动画GIF文件和单个img节点替换。还有许多其他方法可以为Web做动画。您可能需要查看有关平面设计堆栈交换的What's the best way to animate an illustration for the web?讨论。

有关详细信息，请查看：

HAR 1.2 Spec
The State of Browser Caching, Revisited
HTTP Caching来自lya Grigorik

函数不断从服务器而不是缓存

2 个答案: