hình ảnh cách để pre-load hiệu quả hơn

Question

một cách tốt hơn để pre-load hình ảnh là gì:

$.each(['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
     '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
     '{{ MEDIA_URL }}jwplayer/player.swf'], function() { 
    $('<img/>')[0].src = this; 

hay:

var preloadImages = ['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
        '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
        '{{ MEDIA_URL }}jwplayer/player.swf']; 
var imgs = []; 
for (var i=0; i<preloadImages.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].src = preloadImages[i]; 
} 

Điều gì làm cho một tốt hơn so với người kia?

Answer 1

Thứ hai là tốt hơn so với thứ nhất, bởi vì JavaScript đơn giản so với bloatware quá mức của jQuery.

Bạn có thể cải thiện thiết bị thứ hai một chút, bằng cách đặt l=preloadImages.length lên trên và sử dụng thiết bị đó trong vòng lặp.

Answer 2

Cả hai đều làm tương tự. Đoạn đầu tiên là sử dụng jQuery và đoạn thứ hai thì không. Không có lý do gì để sử dụng jQuery dành riêng cho mục đích này, vì vậy nếu bạn không sử dụng thư viện ở nơi khác, hãy sử dụng phiên bản thứ hai. Nếu bạn đang sử dụng jQuery trên toàn bộ trang web của mình, thì trang đầu tiên cũng ok.

Answer 3

Thứ hai nhanh hơn. Đầu tiên là ít đánh máy hơn (bằng cách sử dụng một phương thức iterator mức cao hơn trong jQuery).

Nếu bạn đã có jQuery trong dự án của mình vì các lý do khác, thì tốt hơn là phụ thuộc vào việc bạn có muốn tối ưu hóa tốc độ hoặc kích thước mã hay không.

Ở cấp độ kỹ thuật, có một sự khác biệt thực hiện thực tế. Phiên bản thứ hai giữ một mảng các đối tượng hình ảnh xung quanh trong một biến. Việc đầu tiên cho phép các đối tượng hình ảnh nhận được rác thu thập được.