jQuery .load() không hoạt động trên hình ảnh của tôi

Question

Tôi có một số mã mà tôi đang cố gắng chạy khi hình ảnh của tôi đã tải xong. Tôi sử dụng mã jQuery sau đây:

$("#myimageid").load(function() { 
    alert('Image Loaded'); 
}); 

Tuy nhiên, cửa sổ bật lên không bao giờ hiển thị. Tôi không thể lấy hàm .load() để làm việc! Bất cứ ai có vấn đề với điều này?

Answer 1

Nếu bạn đang chạy sau khi hình ảnh này đã có nguồn đã đặt, bạn cần thực hiện kiểm tra bổ sung để lưu trữ hình ảnh (người đã kích hoạt sự kiện, ngay trước khi bạn thêm trình xử lý sự kiện đang nghe). Bạn có thể làm điều đó như thế này:

$("#myimageid").on('load', function() { 
    alert('Image Loaded'); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Cập nhật cho các phiên bản sau này của truy vấn, sử dụng:

if(this.complete) $(this).trigger('load'); 

Sử dụng (this).load(); sẽ tạo ra một lỗi Cannot read property 'indexOf' of undefined

Answer 2

Điều gì sẽ xảy ra khi bạn xóa bộ nhớ cache của trình duyệt và thử lại tập lệnh? Từ jQuery load()docs:

Có thể là sự kiện tải sẽ không được kích hoạt nếu hình ảnh là nạp từ bộ nhớ cache của trình duyệt. Để tài khoản cho khả năng này, chúng tôi có thể sử dụng sự kiện tải đặc biệt kích hoạt ngay lập tức nếu hình ảnh đã sẵn sàng. event.special.load hiện đang có sẵn như là một plugin

Nói chung, nó không phải là cần thiết để chờ đợi cho tất cả hình ảnh là hoàn toàn tải. Nếu mã có thể được thực thi trước đó, tốt nhất là đặt nó trong trình xử lý được gửi đến phương thức .ready() .

Vì vậy, có vẻ như hình ảnh được lưu trong bộ nhớ cache của bạn không kích hoạt sự kiện tải, vì vậy bạn có thể muốn thử plugin được đề cập. Bạn có thể tìm thấy tệp JS để tải xuống here.

Hy vọng điều này sẽ hữu ích!