2012-11-03 14 views
5

nếu tôi sử dụng cú pháp jQuery: $("<img src='img.jpg'>"), hình ảnh có thực sự được tải xuống cho khách hàng không? hoặc tôi có phải gắn nó vào cơ thể để tải xuống không?

Trả lời

6

Bạn không phải thêm phần tử hình ảnh vào tài liệu để tải hình ảnh.

Bản thân phần tử hình ảnh sẽ yêu cầu hình ảnh ngay khi bạn tạo (và ngay sau khi nó có giá trị src).

Watch acivity ròng (trong Firebug Tools/Developer) khi bạn chạy này: http://jsfiddle.net/Guffa/AvgVN/

Google "javascript preload" để tìm tấn ví dụ mã có sử dụng này.

+0

Tôi nghĩ điều này là sai nhưng không phải vậy! Bây giờ tôi nhớ, các trình tải trước hình ảnh cuối thập niên 90 "cũng đã hoạt động theo cách đó. –

+0

Tôi cũng thế. Thực tế là nó là thực sự ngay lập tức tải về! – techfoobar

5

Có, hình ảnh sẽ được tải xuống ngay lập tức.

Mặc dù yếu tố Image đã được tạo chưa có trong DOM, trình duyệt của bạn sẽ vẫn bắt đầu tải xuống ngay khi thuộc tính .src được đặt.

Sử dụng avatar riêng của bạn, tôi chỉ làm điều này trong bảng điều khiển

> i = $('<img src="http://graph.facebook.com/100002351317104/picture?type=large">'); 
... 
> i[0].width 
180 

cho thấy hình ảnh thực sự là nạp.

Nếu bạn nghĩ về điều này, điều này thực sự phải là trường hợp nếu không tải hình ảnh trước không bao giờ có thể hoạt động. Tải trước hình ảnh phụ thuộc vào việc tạo nút tách rời Image và đặt số src, chính xác là những gì $("<img src=...>") sẽ thực hiện.

+0

+1 Nó * thực sự được tải xuống ngay lập tức! – techfoobar

2

Tôi sẽ nói có hoặc có thể phụ thuộc vào trình duyệt.

$("<img src='http://crssrd.com/web_apps/index/themes/crssrd.com/images/loading.gif'>")​ 

Kiểm tra điều này trên Chrome ví dụ: http://jsfiddle.net/SMnhU/ Hình ảnh được tải xuống ngay lập tức.

+0

Bạn có thể cung cấp ví dụ về trình duyệt _does not_ ngay lập tức tải xuống hình ảnh không? –

+0

Không, tất cả các trình duyệt tôi đã thử tải xuống ngay lập tức. Nhưng tôi đã không thử nghiệm opera ví dụ nhưng bị bệnh thực sự ngạc nhiên nếu nó khác nhau cho trình duyệt này. –

+0

Vì vậy, có lẽ nó là an toàn để nói rằng nó _does not_ phụ thuộc vào trình duyệt :) –

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