Cách tốt nhất để tải trước thẻ hình ảnh SVG là gì?

Question

Tôi đang xây dựng hình ảnh dựa trên SVG (một phần) dựa trên việc hiển thị nhiều hình ảnh liên tiếp nhanh chóng. Không thể tải các hình ảnh đủ nhanh từ mạng, vì vậy chúng phải được tải trước.

Sự hiểu biết của tôi là SVG không lưu trữ đúng các thẻ image, ít nhất trong các trình duyệt chính. Vì vậy, JavaScript tải trước các librairies và các kỹ thuật (ví dụ: this SO question) sẽ không hoạt động. (Tôi có thể nghỉ mát để sử dụng HTML lớp img thẻ, nhưng vì các chi tiết cụ thể của ứng dụng của tôi, tôi muốn dính vào SVG tinh khiết càng nhiều càng tốt)

tôi thấy hai lựa chọn:

• Encoding sự Dữ liệu hình ảnh PNG dưới dạng base64, lưu trữ nó trong bộ nhớ dưới dạng chuỗi và sử dụng các chuỗi để lặp lại các thẻ image bằng cách sử dụng data:image/png;base64.
• Phân nhóm nhiều nhóm SVG lên trên cùng với tất cả trừ một nhóm được đặt thành display: none hoặc visibility: hidden và lặp lại việc ẩn nhóm thích hợp. Tuy nhiên, tôi tin rằng nó sẽ không thể lập trình phát hiện ra rằng tất cả các hình ảnh đã hoàn thành tải trước.

Cách tốt nhất để tải trước dữ liệu hình ảnh là gì? Có lẽ tôi đã bỏ lỡ một lựa chọn dễ dàng hơn.

Answer 1

Tôi không đủ quen thuộc với các cơ chế cơ bản của các trình duyệt web để biết nếu điều này sẽ làm việc với svg image thẻ, nhưng tôi đã thành công bộ nhớ đệm hình ảnh với hình ảnh mới():

//download low quality images 
    var imageArray = [] 
    for (var i = 0; i < 600; i++){ 
     imageArray[i] = new Image(); 
     imageArray[i].src = moviePath + (i + 1) + '.jpg.t'; 
     imageArray[i].onload = function(){ 
      var i = this.src.split(movieName + '/')[1].split(".")[0]; 
      d3.select("#bar" + i).style("stroke", 'rgb(' + colors[i].rgb + ')'); 
     } 
    } 

Để hiển thị một hình ảnh, tôi chỉ cần đặt src của hình ảnh được hiển thị cho hình ảnh đã được tải và trình duyệt tải nó từ bộ nhớ cache của nó.

Có một mẹo nhỏ được sử dụng sau này trong source - hiển thị hình ảnh chất lượng thấp trước tiên và bắt đầu tải hình ảnh chất lượng cao chỉ sau khi hết thời gian chờ mà không chọn hình ảnh khác. Sau đó, sau khi hình ảnh chất lượng cao đã được tải, chỉ hiển thị hình ảnh đó nếu cùng một hình ảnh vẫn được chọn.

Không biết đây có phải là phương pháp hay nhất hay không, nhưng it worked reasonably well.