Tải hình ảnh cho hình ảnh tĩnh

Question

Tôi biết rằng để tải hình ảnh hoạt động, bạn phải đặt src sau khi xử lý tải trọng được đính kèm. Tuy nhiên tôi muốn đính kèm các trình xử lý tải lên cho các hình ảnh tĩnh trong HTML của tôi. Ngay bây giờ tôi làm điều đó theo cách sau (sử dụng jQquery):

<img id='img1' src='picture.jpg'> 

$('#img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('img1').attr('src')); 

Nhưng điều này là khá xấu xí và có dòng chảy rõ ràng rằng nó chỉ có thể được thực hiện cho bộ chọn phù hợp chỉ có một hình ảnh. Có cách nào khác, đẹp hơn để làm điều này không?

chỉnh sửa
Những gì tôi có nghĩa rằng nó chỉ có thể được thực hiện cho bộ chọn phù hợp với chỉ một hình ảnh là khi làm điều này:

<img class='img1' src='picture.jpg'> 
<img class='img1' src='picture2.jpg'> 

$('.img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('.img1').attr('src')); 

Đó cả hình ảnh sẽ có src = 'picture.jpg'

Answer 1

Bạn có thể kích hoạt sự kiện (hoặc nó handler) trực tiếp bằng cách gọi .trigger() hay .load().

Nếu bạn biết rằng bạn muốn sự kiện này, bởi vì bạn biết rằng những hình ảnh đã được nạp, thì bạn có thể làm điều đó như thế này:

$('#img1').load(function() { 
    alert('foo'); 
    }) 
    .trigger('load'); // fires the load event on the image 

Nếu bạn đang chạy script của bạn trên tài liệu sẵn sàng hoặc một số khoảnh khắc nơi mà nó vẫn chưa rõ ràng nếu những hình ảnh đó hay không, sau đó tôi sẽ sử dụng một cái gì đó như thế này:

$('img.static') 
    .load(function(){ 
    alert('foo'); 
    return false; // cancel event bubble 
    }) 
    .each(function(){ 
    // trigger events for images that have loaded, 
    // other images will trigger the event once they load 
    if (this.complete && this.naturalWidth !== 0) { 
     $(this).trigger('load'); 
    } 
    }); 

được cảnh báo rằng các bong bóng sự kiện tải (jQuery 1.3) và bạn có thể có thể được kích hoạt một handler tải trên tài liệu sớm nếu bạn không hủy bỏ bong bóng trong xử lý img.

Để lưu nội dung: img.src=img.src giải pháp kích hoạt sẽ không hoạt động chính xác trên Safari. Bạn sẽ cần phải đặt src thành một thứ khác (như # hoặc about: blank) và sau đó quay lại để tải lại xảy ra.

Answer 2

Tôi đoán đây thực sự là một câu hỏi về bộ chọn jQuery S. Nếu bạn muốn kết hợp tất cả các yếu tố hình ảnh của mình thì bạn có thể sử dụng img thay vì #img1 làm công cụ chọn của mình.

Answer 3

Thêm lớp vào hình ảnh nơi bạn muốn chức năng này và sử dụng lớp đó trong bộ chọn jQuery.

$('.static-image').load(function(){ ... }); 

Answer 4

Được rồi, tôi quay Borgars trả lời vào một plugin, ở đây nó là:

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
}