jQuery tải hình ảnh với gọi lại hoàn chỉnh

Question

Tôi thấy a comment on Ben Nadel's blog nơi Stephen Rushing đăng bộ tải, nhưng tôi không thể tìm ra cách tôi có thể vượt qua bộ chọn và tham số .. Tôi nghĩ mình cũng cần một hàm completeCallback & errorCallback?

function imgLoad(img, completeCallback, errorCallback) { 
    if (img != null && completeCallback != null) { 
     var loadWatch = setInterval(watch, 500); 
     function watch() { 
      if (img.complete) { 
       clearInterval(loadWatch); 
       completeCallback(img); 
      } 
     } 
    } else { 
     if (typeof errorCallback == "function") errorCallback(); 
    } 
} 
// then call this from anywhere 
imgLoad($("img.selector")[0], function(img) { 
    $(img).fadeIn(); 
}); 

HTML:

<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a> 

JS:

$(document).ready(function() { 
    var newImage = "images/002.jpg"; 
    $("#myImage").css("display","none"); 
    $("a.tnClick").click(function() { 
     // imgLoad here 
    }); 
}) 

Answer 1

Nếu bạn muốn nó để tải trước khi hiển thị, bạn có thể cắt mà xuống rất nhiều, như thế này:

$(document).ready(function() { 
    var newImage = "images/002.jpg"; //Image name 

    $("a.tnClick").click(function() { 
     $("#myImage").hide() //Hide it 
     .one('load', function() { //Set something to run when it finishes loading 
      $(this).fadeIn(); //Fade it in when loaded 
     }) 
     .attr('src', newImage) //Set the source so it begins fetching 
     .each(function() { 
      //Cache fix for browsers that don't trigger .load() 
      if(this.complete) $(this).trigger('load'); 
     }); 
    }); 
}); 

Cuộc gọi .one() đảm bảo .load() chỉ kích hoạt một lần, vì vậy không có các fade-in trùng lặp. .each() ở cuối là do một số trình duyệt không kích hoạt sự kiện load cho hình ảnh được tìm nạp từ bộ nhớ cache, đây là điều mà cuộc thăm dò trong ví dụ bạn đã đăng cũng đang cố gắng thực hiện.

Answer 2

Hãy thử cái này?

doShow = function() { 
    if ($('#img_id').attr('complete')) { 
    alert('Image is loaded!'); 
    } else { 
    window.setTimeout('doShow()', 100); 
    } 
}; 

$('#img_id').attr('src', 'image.jpg'); 
doShow(); 

Có vẻ như các công trình trên khắp mọi nơi ...

Answer 3

Bạn cần phải cẩn thận khi sử dụng các sự kiện tải cho hình ảnh vì nếu hình ảnh được tìm thấy trong bộ nhớ cache của trình duyệt IE và (Tôi đang nói) Chrome sẽ không kích hoạt sự kiện như mong đợi.

Vì tôi đã phải đối mặt với vấn đề này, tôi đã giải quyết bằng cách kiểm tra thuộc tính DOM hoàn chỉnh (được làm việc trong hầu hết các trình duyệt chính): nếu bằng true, tôi chỉ hủy liên kết sự kiện 'tải' trước đó. Xem ví dụ:

$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething); 

if ($("#myimage").get(0).complete) { 

    // already in cache? 
      $("#myimage").unbind("load"); 
      doSomething(); 


} 

Hope this helps

Answer 4

tôi muốn chức năng này và chắc chắn không muốn phải tải tất cả những hình ảnh khi trang này hiển thị. Hình ảnh của tôi là trên Amazon s3 và với một photogallery lớn, đó sẽ là rất nhiều yêu cầu không cần thiết. Tôi tạo ra một jQuery plugin nhanh chóng để xử lý nó here:

$("#image-1").loadImage('/path/to/new/image.jpg',function(){ 
    $(this).css({height:'120px'});//alter the css styling after the image has loaded 
}); 

Vì vậy, về cơ bản, bất cứ khi nào người dùng nhấp vào một hình ảnh thu nhỏ đại diện cho một tập hợp các hình ảnh, tôi tải các hình ảnh khác tại thời điểm đó. Gọi lại cho phép tôi thay đổi css sau khi hình ảnh đã được tải.