Cách tốt nhất để tải trước nhiều hình ảnh trong JavaScript là gì?

Question

Nếu tôi có một loạt các tên tập tin hình ảnh,

var preload = ["a.gif", "b.gif", "c.gif"]; 

và tôi muốn tải trước đó trong một vòng lặp, nó là cần thiết để tạo ra một đối tượng hình ảnh mỗi lần? Tất cả các phương pháp được liệt kê bên dưới có hoạt động không? Là một tốt hơn?

A.

var image = new Image(); 
for (i = 0; i < preload.length; i++) { 
    image.src = preload[i]; 
} 

B.

var image; 
for (i = 0; i < preload.length; i++) { 
    image = new Image(); 
    image.src = preload[i]; 
} 

C.

var images = []; 
for (i = 0; i < preload.length; i++) { 
    images[i] = new Image(); 
    images[i].src = preload[i]; 
} 

Cảm ơn!

Answer 1

EDIT:

Thực ra, tôi chỉ cần đặt nó vào kiểm tra, và Phương pháp A không hoạt động như mong đợi:

Check it out: http://www.rootspot.com/stackoverflow/preload.php

Nếu bạn bấm vào ngày 2 hình ảnh khi trang được tải xong, nó sẽ xuất hiện ngay lập tức vì nó đã được tải sẵn, nhưng cái đầu tiên không phải vì nó không có thời gian để tải trước khi nguồn được thay đổi. Hấp dẫn. Với sự phát triển mới này, tôi chỉ cần tiếp tục và sử dụng Phương pháp C.

Answer 2

Nếu tôi nhớ chính xác tôi đã gặp sự cố với giải pháp A không thực sự được tải trước trong trình duyệt. Tôi không chắc chắn 100%.

Vì bạn đã mã hóa tất cả, tại sao không kiểm tra chúng, bạn thậm chí có thể lập hồ sơ để xem nhanh nhất.

Answer 3

Tôi luôn sử dụng đoạn mã sau, mà tôi cũng đã nhìn thấy được sử dụng bởi nhiều trang web khác, vì vậy tôi sẽ làm cho các giả định rằng phương pháp này là performant nhất và là tương tự như phương pháp c bạn

function MM_preloadImages() { //v3.0 
    var d=document; 
    if(d.images){ 
     if(!d.MM_p) d.MM_p=new Array(); 
     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
     for(i=0; i<a.length; i++) 
      if (a[i].indexOf("#")!=0) { 
       d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; 
      } 
    } 
} 

Tôi sẽ khuyên bạn nên lược tả tất cả chúng bằng một cái gì đó như firebug

Answer 4

Mã sau đây có vẻ phù hợp với tôi. Nó dựa trên [A]

JQuery:

var gallery= ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png']; 

var preload_image_object=new Image(); 

// Giải pháp:

$.each(gallery,function(i,c){preload_image_object.src=c.logo}) 

HOẶC

$.each(['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'],function(i,c){preload_image_object.src=c})