0
我已经使用JQuery“幻灯片”创建了一个动画。该功能以100毫秒的速度翻转62张图像。问题是，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开发工具显示，在第一次运行动画之后，传输的数据量实际上并没有增加。我在这里丢失了什么，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"
},
您能不能告诉我们HTTP一个图像请求和响应的头该浏览器不缓存？您可以使用Chrom DevTools [全部复制为HAR]（https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#copy）。 –
嗨@LeonidVasilyev谢谢你的回复。我添加了一个图片请求的例子。我使用Chrome DevTools“Copy All as HAR”。 –
这可能是一些帮助http://stackoverflow.com/questions/3712234/caching-dynamically-loaded-images –