2012-10-16 37 views
6

Tôi đã tìm kiếm ở đây và trong Google khi thực hiện chính xác jQuery (.) Sự kiện cháy (tất nhiên tôi có nghĩa là tải sự kiện cho hình ảnh)? Tôi không có ý situtation điển hình khi tài liệu với hình ảnh là tải, những gì tôi biết - sự kiện cháy tải khi chúng ta:Khi nào chính xác sự kiện tải jQuery cháy?

1/Phụ thêm img mới để tài liệu:

$('<img src="picture.jpg" />').appendTo('body'); 

2/Thay đổi src thuộc tính của hình ảnh hiện có:

$('img').attr('src' , 'new_path.jpg'); 

3/Tạo đối tượng img mới:

var object = $('<img src="picture.jpg" />'); 

Nhưng những gì về những tình huống này vì tôi không chắc chắn:

4/Phụ thêm hình ảnh vào đối tượng không được thêm vào tài liệu (DOM):

var o = $('<div></div>'); 
o.append('<img src="picture.jpg" />'); 

// Tôi có nghĩa là o không tồn tại trong cây DOM, nó không được gắn thêm

5/Đang tải nội dung với imgs để đối tượng không được thêm vào tài liệu:

var o = $('<div></div>'); 
o.load('url.html #pictures'); 

// Ý tôi là o không tồn tại trong cây DOM, nó không nối

tôi sẽ rất biết ơn sự giúp đỡ ...

+0

Thật không may tôi tin rằng hành vi 'tải' thay đổi rất lớn dựa trên trình duyệt. –

Trả lời

2

Đối với số 4, nó dường như chỉ kích hoạt một lần khi nó được nối vào đối tượng trong bộ nhớ và nó không kích hoạt lại khi được nối vào DOM. Kiểm tra fiddle này: http://jsfiddle.net/JxHe4/ và xem lưu lượng mạng và giao diện điều khiển đầu ra trong công cụ Chrome hoặc Firebug.

Hành vi có vẻ nhất quán giữa Chrome, Firefox và IE9. Bây giờ điều này trả lời một phần câu hỏi của bạn (hy vọng) nhưng không giải thích lý do cho hành vi này. Tôi đoán là đây là cách nó được chỉ định (vì tất cả các trình duyệt đều hoạt động tương tự) nhưng tôi không thể tìm thấy đặc tả khi sự kiện onLoad được định nghĩa chính thức.

Đối với số 5, tôi không mong đợi tải hình ảnh bị ảnh hưởng bởi tải trang, tôi không biết làm cách nào bạn có thể tham chiếu đến những hình ảnh này ở nơi đầu tiên để đính kèm trình xử lý .Load cho họ .

[UPDATE]

This excerpt from HTML4 specification có thể giải thích hành vi tại điểm 4: Một tài liệu nhúng (IMG trong trường hợp này) là hoàn toàn độc lập với các tài liệu trong đó nó được nhúng. Ví dụ, các URI tương đối trong tài liệu nhúng giải quyết theo URI cơ sở của tài liệu được nhúng, không phải là tài liệu chính. Tài liệu được nhúng chỉ được hiển thị trong tài liệu khác (ví dụ: trong cửa sổ phụ); nó vẫn còn độc lập.

+1

Thậm chí tốt hơn cho # 4, nếu bạn bình luận ra '$ (" placeHolder "). Chắp thêm (o);' thì sự kiện sẽ vẫn cháy. – Calavoow

+0

vâng .. đây là những gì tôi có nghĩa là, nó chỉ cháy một lần khi nó được nối thêm vào trong bộ nhớ, và nó không cháy một lần nữa khi nối vào DOM – kabaros

+0

# 4 Có, có vẻ như sự kiện được kích hoạt khi img được thêm vào đối tượng -memory nhưng nó không hoạt động trong Opera (chỉ FF/IE/Chrome). – Lluck

0

trong trường hợp

4 - Bạn có thể thêm phần tử var o và bây giờ khi bạn thêm var bạn o một số DOM, nó sẽ nối div chứa img.

5 - Trong trường hợp o.load, nội dung sẽ không được tải cho đến khi biến số o bị xóa trên trang. Bạn sẽ không nhận được một lỗi cho cùng trong giao diện điều khiển mặc dù.

+0

Vui lòng không txtspk trên SO. Không phải tất cả mọi người là một người nói tiếng Anh thành thạo và những từ bỏ như 'u' và' wen' thì khó hiểu. – Jamiec

+0

tôi sẽ giữ điều đó trong tâm trí.thanks để chỉnh sửa jamiec. –

0

Số 4 của bạn sẽ kích hoạt sự kiện tải trong hầu hết các trường hợp (có thể có một số vấn đề với hình ảnh được lưu trong bộ nhớ cache), tuy nhiên # 5 có thể hoặc không tùy thuộc vào nơi bạn ràng buộc sự kiện và tải hình ảnh nhanh như thế nào. Nếu bạn đã chặn sự kiện trên dòng sau .load(url), sự kiện sẽ không kích hoạt vì hình ảnh chưa tồn tại. Nếu bạn đặt nó vào thành công của cuộc gọi .load, nó có thể kích hoạt nếu nó chưa được kích hoạt trước khi bạn giới hạn nó (điều kiện chủng tộc).

+0

Bạn đã viết: "nếu một hình ảnh được bao gồm trong DOM trực tiếp, nó sẽ chỉ được tải nếu nó được hiển thị". Tôi không chắc chắn nếu bạn là đúng, xin hãy xem ví dụ này: http://jsfiddle.net/neam3/ - khi bạn có

sự kiện tải vẫn cháy ... – Lluck

+0

Bạn là chính xác, trong thử nghiệm của tôi là chờ đợi không chính xác cho đến khi chúng được thực hiện. –

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