2012-11-05 18 views
7

Tôi có một ứng dụng hiển thị cùng một hình ảnh ở nhiều vị trí và có thể thay đổi src của hình ảnh.Tại sao Chrome đưa ra yêu cầu mới cho hình ảnh SVG này mỗi lần, nhưng không phải cho PNG?

Khi tôi trỏ đến hình ảnh PNG mà tôi đã sử dụng trước đó, trình duyệt không bận tâm đến yêu cầu mới, nó chỉ sử dụng hình ảnh PNG đã có trong bộ nhớ cache. Tuy nhiên, khi tôi trỏ đến hình ảnh hình ảnh SVG mà tôi đã sử dụng trước đó, trình duyệt (Chrome 22) tạo một yêu cầu mới. Máy chủ trả về 304 (Không được sửa đổi), do đó không cần tải xuống hình ảnh mới nhưng vẫn cần xử lý thêm.

này có thể dễ dàng kiểm tra trong jsFiddle này: http://jsfiddle.net/jtmuw/1/

$('button').click(function() { 
    $('#a').attr('src', "myImage.svg"); 

    $('#b').attr('src', "myImage.png"); 
}); 

Nếu bạn mở fiddle với Chrome (hoặc ít nhất v.22.0.1229.94 Chrome) và bạn mở ra mạng của bạn tab bạn sẽ thấy hai hình ảnh đã được yêu cầu. Nếu sau đó bạn nhấn "tải lại hình ảnh" nhiều lần, tab mạng của bạn sẽ hiển thị nhiều yêu cầu cho hình ảnh SVG nhưng không yêu cầu thêm hình ảnh PNG.

Theo như tôi có thể biết, các tiêu đề tương tự đang được máy chủ trả về, vì vậy tôi không thể thấy bất kỳ lý do nào cho sự khác biệt.

Tôi không thấy điều này trên FF hoặc Safari, vì vậy đây có thể là sự cố Chrome. Tuy nhiên, tôi vẫn cảm thấy có thể có một số khác biệt cơ bản trong các tiêu đề mà tôi đang thiếu, và không chỉ Chrome đang xử lý hình ảnh SVG một cách kỳ lạ.

+0

SVG chỉ được tải một lần trong ví dụ jsFiddle bằng Chromium 18. Nhưng tôi có thể thấy rằng một số tệp JS được tải hai lần. Cuộc gọi thứ hai được đánh dấu là "từ bộ nhớ cache". Điều này nhắc tôi về [yepnopejs] (http://yepnopejs.com/), trong đó có một sự kiện để cuối cùng bao gồm các tập tin. Có thể có một số tập lệnh tải thứ hai. – feeela

Trả lời

1

Bạn có thể buộc Chrome lưu vào bộ nhớ cache tệp. w3schools có một cái nhìn tổng quan khá tốt về điều này như sau: http://www.w3schools.com/html/html5_app_cache.asp

Về cơ bản bạn sẽ muốn tạo một file manifest (gọi nó là ... "myCache.appcache" hay bất cứ điều gì khác)

CACHE MANIFEST 
/path/to/svg/file.svg 

và sau đó trỏ đến điều này trong tệp html của bạn như sau:

<html manifest="myCache.appcache"> 

Điều này sẽ cho Chrome biết, ngay cả khi bạn không có quyền truy cập internet, tệp này sẽ được lưu vào bộ nhớ cache và có thể truy cập được.

+0

Điều này có giúp ích gì cho bạn không? :) –

1

Bao gồm hình ảnh SVG ở đầu tài liệu.

<html> 
<head> 
    ... 
</head> 
<body> 
    <img style="display:none" src="cached.svg"> 
    .... 
</body> 
<html> 
+0

Bản vá thú vị! Nó đã hoạt động. '+ 1' – Sergio

Các vấn đề liên quan