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 –