0
나는 JQuery와 "슬라이드 쇼"를 사용하여 애니메이션을 만든에서 요청하는 이미지를 유지합니다. 이 기능은 100 밀리 초로 설정된 속도로 62 개의 이미지를 뒤집습니다. 문제는,입니다 크롬 개발자 도구 쇼, 함수가 각주기 위해 또 다시 서버에서 이미지를 요청하는 대신 캐시를 사용하여 유지있다. 픽처 모두 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>
서버에 미리로드하는 대신 미리 슬라이드 쇼 코드 앞에 배치했습니다. 프리로드는 Firefox, Internet Explorer 또는 Edge에서 작동하지 않습니다. 나는 사파리를 시도하지 않았다.
<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 요청 헤더.
나는 크롬 개발 도구는 전송 된 데이터의 양이 실제로 애니메이션을 통해 처음 실행 한 후, 최대하지 않을 것을 같이 요청이 캐시를 무시 더 이상 것을 완전히 확실하지 않다. 내가 여기서 누락 된 것은 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 "모두를 HAR로 복사"를 사용했습니다. –
이것은 도움이 될 수 있습니다. http://stackoverflow.com/questions/3712234/caching-dynamically-loaded-images –