Hình ảnh ràng buộc tải chậm vào hình ảnh mới được chèn sau yêu cầu ajax

Question

Tôi đang sử dụng plugin Tải Lazy Lazy của Mika Tuupola http://www.appelsiini.net/projects/lazyload để trì hoãn tải hình ảnh khi bạn cuộn xuống thư viện hình ảnh dài. Vấn đề là sau 10 hình ảnh, tôi sử dụng cuộn vô hạn vì vậy tôi lấy 10 hình ảnh tiếp theo và nối chúng qua ajax. Tải xuống Lười biếng không còn hoạt động trên loạt hình ảnh được nối tiếp tiếp theo này.

Đó là một thư viện hình ảnh khá javascript, vì vậy mọi thứ khác (như chú giải công cụ, lớp phủ phương thức, v.v.) Tôi đã sử dụng ủy nhiệm của jQuery() để liên kết với các phần tử được chèn vào ajax. Vấn đề với plugin Lazy Load là tôi không chắc chắn sự kiện sự kiện nào để liên kết.

Vì vậy, nói rằng tôi muốn tải hình ảnh lười biếng với một lớp "lười". Tôi sẽ viết điều này:

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}); 

và nó hoạt động cho 10 hình ảnh đầu tiên, nhưng ngừng hoạt động sau khi chèn thêm thông qua ajax. Điều duy nhất tôi có thể nghĩ đến là sử dụng đại biểu trên kiện tải, như vậy:

$(document).delegate("img.lazy", "load", function(event) { 
    $(this).lazyload({ 
     effect: "fadeIn" 
    });  
}); 

nhưng mà phá vỡ tất cả mọi thứ. Cảm ơn!

EDIT: Các jQuery tôi sử dụng để tải nhiều hồ sơ (đây là một ứng dụng Rails):

$(window).scroll(function() { 
    var url; 
    url = $(".pagination .next_page").attr("href"); 
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) { 
    $(".pagination").html("<p>loading more images...</p>"); 
    return $.getScript(url); 
    } 
}); 

$(window).scroll(); 

Answer 1

tôi sẽ sử dụng phương pháp ajaxStop.

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy"); 
$(document).ajaxStop(function(){ 
    $("img.lazy").lazyload({ 
     effect: "fadeIn" 
    }).removeClass("lazy"); 
}); 

removeClass ngăn khởi tạo kép.

Answer 2

Ngoài câu trả lời Kevin B nếu bạn muốn tránh ajaxStop jQuery nay định nghĩa một hàm when() cho mục đích đó

// the following code will be executed when the ajax request resolve. 
// the ajax function must return the value from calling the $.ajax() method. 

    $.when(load_new_image(1), load_new_image(2), load_new_image(3)).done(function(i1, i2, i3){ 

      if($('img.lazy').length){ 

       $('img.lazy').lazyload({ 

          effect:'fadeIn' 

       }).removeClass('lazy').addClass('lazyloaded'); 

      } 

     }); 

     function load_new_image(image_id) { 

      return $.ajax({ 
       url: "someUrl", 
       dataType: "json", 
       data: yourJsonData,    
       ... 
      }); 
     } 

từ: http://api.jquery.com/jQuery.when/