không đồng bộ hóa hoặc đồng bộ hóa? khi chúng ta thiết lập thuộc tính src của đối tượng Image?

Question

var img=new Image(); 
img.src='xxxxx'; 

Trình duyệt có chờ tải hình ảnh sau đó thực thi dòng mã tiếp theo không?

Answer 1

Hành động đó là không đồng bộ; rất nhiều mã 'tải trước' hình ảnh dựa trên tính năng đó.

EDIT: Để cung cấp thêm một chút thông tin hữu ích nữa. Nếu bạn đang muốn có hành động nhất định chờ đồng bộ cho hình ảnh để tải qua đối tượng hình ảnh javascript, bạn có thể sử dụng các sự kiện onload, như vậy:

var img = new Image(); 
img.onload = function() { /* onLoad code here */ }; 
img.src = 'xxxxxx'; 

Answer 2

var img = new Image();

Đây là cách cũ tạo hình ảnh không được dùng nữa. Ưu tiên document.createElement('IMG') hoặc tạo một thông qua chuỗi và innerHTML.

Bây giờ, hình ảnh là replaced elements, có nghĩa là chúng tải bất cứ khi nào chúng đến, nhưng không gian được dành riêng cho chúng trong luồng bố cục nếu kích thước của chúng được chỉ định. (Nếu không, một không gian biểu tượng được dành riêng và màn hình sẽ được vẽ lại khi hình ảnh đến với các kích thước của nó trong tiêu đề, điều này có thể là một trải nghiệm người dùng không hài lòng, vì vậy bạn được khuyến khích kích thước hình ảnh sẵn sàng khi trang đang được hiển thị lần đầu tiên.)

Answer 3

Đồng ý với việc tải trước hình ảnh @dereleased được thực hiện không đồng bộ; chỉ nghĩ rằng tôi muốn thêm rằng có một số cách để sử dụng kỹ thuật này trên đối tượng Image() trong javascript, như sử dụng mảng hoặc xử lý sự kiện.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Thay đổi src không đồng bộ.

Mã

image.src = "http://newimage-url";

sẽ trở lại ngay lập tức và trình duyệt sẽ tải hình ảnh mới trong chủ đề khác. Trước khi được tải hoàn toàn, tất cả thuộc tính của thẻ <img> sẽ không chính xác, chẳng hạn như chiều rộng hoặc chiều cao.

Vì vậy, $(image).width() không thể trả lại chiều rộng của hình ảnh mới.

Như @Deleleased đã chỉ ra, bạn có thể triển khai phương thức 'khi tải', mã sẽ chỉ được thực thi sau khi hình ảnh đã tải xong. jQuery của load() có thể thực hiện điều này một cách dễ dàng.