gọi lại jquery khi tải hình ảnh khi thay đổi src

Question

Tôi đang thay đổi img src khi tôi đã tải tệp json, tất cả đều hoạt động tốt. Nhưng tôi muốn đảm bảo hình ảnh được tải hoàn toàn. Tôi có thể làm gì khi sử dụng:

 .one("load",function(){ 
       alert("image has load yay"); 
      }); 

Nhưng sau khi đọc các bài đăng khác nhau mà không phải tất cả các trình duyệt đều kích hoạt tải nếu hình ảnh trong bộ nhớ cache. Tôi dường như không nhận được vấn đề này trong trình duyệt có nghĩa là gây ra vấn đề này. Nhưng tôi đã chỉ thử nghiệm FF (6.0.2), Chrome (13.0.7) và Safari (5.0.5) trên một mac. Bây giờ tôi chắc chắn rằng IE phải có một vấn đề và nó chỉ có liên quan đến PC. Tôi đang chạy các phiên bản khá gần đây của các trình duyệt để có một cái gì đó thay đổi trong này để bây giờ cháy tải. Hoặc suy nghĩ khác của tôi là tôi đang chạy phiên bản mới nhất của jquery (1.6.3) có. Tải đã được thay đổi?

Tôi hy vọng đó là tất cả để làm với chạy jquery mới nhất, nhưng nếu không và đó là một vấn đề trình duyệt cũ hơn thì tôi cần phải đặt trong một sửa chữa. Tôi đã thử một vài giải pháp trên trang web này ví dụ: jQuery loading images with complete callback Và cũng có một số ý kiến ​​trên trang .load api: http://api.jquery.com/load-event/#comment-30211903

Nhưng tôi dường như không thể nhận được chúng để làm việc. Người đầu tiên không làm việc gì cả và cái thứ hai dường như rơi xuống với .each().

Đây là mã tôi có cho đến nay có vẻ hoạt động tốt, nhưng không thể chắc chắn có thể là một vấn đề trình duyệt cũ hơn.

$.getJSON(jsonURL, function(json) {   
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
     alert("the image has loaded"); 
    //do something here 
    }); 
$("a.imgZoom").attr("href", json[imageID].largeImage); 
}) 

Cảm ơn bạn đã giúp đỡ.

B

Answer 1

Dựa trên một số thử nghiệm tôi đã làm khoảng một năm trước, tôi thấy không có cách nào đáng tin cậy để có được một sự kiện tải khi thay đổi .src của một hình ảnh từ một giá trị khác. Như vậy, tôi đã phải sử dụng để tải một hình ảnh mới và thay thế hình ảnh tôi đã có bằng hình ảnh mới khi hình ảnh mới được tải. Mã đó đã chạy thành công trong vài trăm trang web (nó được sử dụng bởi trình chiếu) trong khoảng một năm nay vì vậy tôi biết nó hoạt động.

Nếu bạn đặt trình xử lý tải TRƯỚC KHI bạn đặt thuộc tính .src trên hình ảnh mới, bạn sẽ nhận được sự kiện tải đáng tin cậy. Dưới đây là một số mã tôi đã viết ngay hôm nay để chụp sự kiện tải: jQuery: How to check when all images in an array are loaded?.

Mã này gắn xử lý sự kiện TRƯỚC thiết lập các .src làm việc cho tôi trong các trình duyệt hiện đại Tôi đã thử nó trong (tôi đã không kiểm tra các trình duyệt cũ):

$("img").one("load", function() { 
     // image loaded here 
    }).attr("src", url); 

Bạn có thể nhìn thấy nó làm việc ở đây: http://jsfiddle.net/jfriend00/hmP5M/ và bạn có thể kiểm tra bất kỳ trình duyệt nào bạn muốn bằng cách sử dụng jsFiddle đó. Chỉ cần nhấp vào hình ảnh để làm cho nó tải một hình ảnh mới. Nó luân phiên thông qua ba hình ảnh khác nhau (thiết lập .src mỗi lần), tải hai trong số họ duy nhất mỗi lần (không bao giờ từ bộ nhớ cache) và một từ bộ nhớ cache để kiểm tra cả hai trường hợp. Nó xuất ra một thông báo tới màn hình bất cứ khi nào trình xử lý .load được gọi để bạn có thể xem nó có được gọi hay không.