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?
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
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". –
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. –