2009-07-19 43 views
9

Tôi cần tải hình ảnh một cách đồng bộ, đó là tôi cần tạm dừng thực thi javascript cho đến khi hình ảnh được tải. Vì image.onload không đồng bộ, chức năng chính sẽ trả về trước khi hình ảnh được tải.Tải hình ảnh đồng bộ với javascript

Tôi đang sử dụng canvas và nếu chức năng chính trả về trước khi hình ảnh được tải và do đó được vẽ, những thứ khác trong canvas sẽ được vẽ trước hình ảnh. Điều này không hiệu quả vì thứ tự vẽ trên canvas rất quan trọng!

Dưới đây là những gì tôi đã làm:

var img = new Image(); 
img.onload = function() { 
    //image drawing code here 
} 
img.src = "blahblahblah"; 
//function returns here, and other drawing code happens before image is drawn 

Có cách nào để làm điều này đồng bộ, hoặc đợi cho đến khi hình ảnh được tải đầy đủ trước khi trở về từ chức năng?

Trả lời

2

Có cách nào để làm điều này đồng bộ, hoặc đợi cho đến khi hình ảnh được nạp đầy đủ trước khi trở từ chức năng?

No. AFAIK, điều duy nhất có thể được thực hiện đồng bộ trong Javascript là cuộc gọi XHR đồng bộ.

Trong mọi trường hợp, những gì bạn nên thực sự làm là thiết lập chế độ thừa kế của các cuộc gọi lại thực hiện các phụ thuộc của bạn.

+0

Tôi có một vòng lặp rất lớn đang thực hiện rất nhiều thao tác vẽ trên canvas và rất khó để tạm dừng vòng lặp trong khi hình ảnh đang tải, đó là những gì tôi cần. Nếu tôi đã sử dụng gọi lại image.onload, hình ảnh sẽ được vẽ sau một thứ khác trong vòng lặp. Điều này làm cho hình ảnh xuất hiện trước những thứ nó nên ở đằng sau. – devongovett

+0

Trong chức năng bắt đầu tải hình ảnh, là điều cuối cùng, hãy sử dụng setInterval để bắt đầu một hàm sẽ đóng trên một đối tượng cũng bị đóng bởi cuộc gọi lại image.onload của bạn. Chức năng "khoảng thời gian" không nên làm gì cho đến khi một cờ cụ thể được thiết lập. Cờ đó phải được đặt bằng gọi lại image.onload của bạn. Khi tìm thấy bộ cờ, hàm "interval" sẽ gọi đoạn mã tiếp theo; mã vẽ trên đầu hình ảnh "nền". –

+0

Bạn * không thể * tạm dừng, bạn phải loại bỏ ý tưởng này khỏi đầu mình. –

0

Tôi không nghĩ bạn có thể làm điều đó một cách không đồng bộ và nghĩ rằng sẽ rất nguy hiểm nếu đường dẫn đến tệp hình ảnh không đúng. Bạn phải xem xét rằng onload là một cuộc gọi lại, sẽ được gọi khi hình ảnh được tải hoàn toàn.

Vì vậy, bạn phải thực thi tất cả mã vẽ trong chức năng gọi lại.

2

Điều này không thể giải quyết được bằng cách tái cấu trúc?

Quấn bất kỳ mã nào bạn cần thực thi sau khi tải hình ảnh vào một hàm được gọi bởi hàm gọi lại (hoặc thực hiện chức năng đó gọi là callbak).

Tôi thấy rằng bạn nói rằng nếu hàm chính trả về, mã khác sẽ thực thi. Bạn có thể quấn cái đó không? Bạn có thể trì hoãn việc thực hiện hay làm cho nó phụ thuộc vào sự kiện onload này hoặc sự kiện nào đó khác?

Bạn thậm chí có thể tự động tải nguồn của mã javascript khác trong tải hình ảnh.

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