Làm cách nào để tôi có thể trả về dữ liệu hình ảnh nhị phân từ yêu cầu AJAX bị hủy và đặt kết quả thành src của hình ảnh HTML/DOM?

Question

Tôi đang viết một ứng dụng web liên quan đến một chu kỳ liên tục tạo (và xóa) một số lượng hình ảnh công bằng trên một trang web. Mỗi hình ảnh được tạo động bởi máy chủ.

var img = document.createElement("img"); 
img.src = "http://mydomain.com/myImageServer?param=blah"; 

Trong một số trường hợp, một số hình ảnh này sống lâu hơn trước khi tải xuống xong. Tại thời điểm đó, tôi xóa chúng khỏi DOM.

Vấn đề là trình duyệt tiếp tục tải xuống những hình ảnh đó ngay cả sau khi chúng đã bị xóa khỏi DOM. Điều đó tạo ra một nút cổ chai, vì tôi có hình ảnh mới đang chờ tải xuống, nhưng họ phải đợi những hình ảnh không cần thiết cũ để hoàn tất tải xuống trước tiên.

Tôi muốn hủy bỏ các tải xuống hình ảnh không cần thiết này. Các giải pháp rõ ràng dường như là để yêu cầu dữ liệu hình ảnh nhị phân thông qua AJAX (kể từ khi yêu cầu AJAX có thể được hủy bỏ), và thiết lập các img.src khi tải về xong:

// Code sample uses jQuery, but jQuery is not a necessity 

var img = document.createElement("img"); 

var xhr = $.ajax({ 
     url: "http://mydomain.com/myImageServer?param=blah", 
     context: img, 
     success: ImageLoadedCallback 
    }); 

function ImageLoadedCallback(data) 
{ 
    this.src = data; 
} 

function DoSomethingElse() 
{ 
    if (condition) 
     xhr.abort(); 
} 

Nhưng vấn đề là điều này dòng không hoạt động theo cách tôi đã hy vọng:

this.src = data; 

Tôi đã tìm kiếm cao và thấp. Không có cách nào để đặt nguồn hình ảnh thành dữ liệu ảnh nhị phân được gửi qua AJAX?

Answer 1

Bạn sẽ phải mã hóa base64 data thành số data: URI để đạt được điều đó. Nhưng nó sẽ không hoạt động trong IE6-7, và có những hạn chế về số lượng dữ liệu bạn có thể đặt trong đó, đặc biệt là trên IE8. Nó có thể là giá trị làm một tối ưu hóa cho các trình duyệt, nơi nó được hỗ trợ, nhưng tôi sẽ không dựa vào nó.

Một cách tiếp cận khác có thể là sử dụng XMLHttpRequest để tải trước hình ảnh, sau đó chỉ cần hủy phản hồi và đặt src của Image mới để trỏ đến cùng một địa chỉ. Hình ảnh sẽ được tải từ bộ nhớ cache của trình duyệt. Tuy nhiên, trong trường hợp bạn đang tạo ra các hình ảnh động, bạn sẽ cần phải chú ý đến các tiêu đề bộ nhớ đệm của bạn để đảm bảo phản hồi có thể lưu vào bộ nhớ cache.

Answer 2

Hãy thử ví dụ:

this.src="data:image/png;base64,XXX"

... nơi XXX là dữ liệu nhị phân của bạn, base64 mã hóa. Điều chỉnh loại nội dung nếu cần. Mặc dù vậy, tôi sẽ không lạc quan về hỗ trợ trình duyệt rộng cho điều này.

Answer 3

Bạn sẽ có thể sử dụng data URIs, tương tự như the solution Tôi đã xác định trong câu hỏi trước đó. Lưu ý rằng điều này sẽ không hoạt động với các trình duyệt cũ hơn.