Tải hình ảnh trong jQuery Mobile

Question

Tôi đang cố gắng triển khai plugin Lazy Load vào trang web jQueryMobile của mình để giúp tăng tốc thời gian tải trên các trang chứa một tấn hình ảnh.

Nếu tôi bỏ qua tải trang ajax của JQM bằng cách truy cập trực tiếp vào URL như thế này: http://hello.com/about, tải chậm hoạt động tốt. Tuy nhiên, nếu tôi nhấp qua trang Giới thiệu từ một trang khác, trang này sử dụng tải trang ajax của JQM, Tải trọng Lười biếng không tải.

Các Về trang có id của about =><div data-role="page" data-theme="a" id="about">

Tôi đã thử một số biến thể của liên kết với các pageinit chức năng không thành công. Nỗ lực mới nhất của tôi là:

$('#about').live('pageinit', function() { 
    $(window).load(function() { 
     $("img.lazy").lazyload(); 
    }); 
}); 

Mọi hướng dẫn về điều này sẽ thật tuyệt vời. Cảm ơn các bạn.

Answer 1

Chức năng window.load sẽ chỉ kích hoạt một lần và bạn sẽ ràng buộc nó sau khi nó kích hoạt khi các trang được kéo vào DOM qua AJAX. Giải pháp cho vấn đề của bạn là khá dễ dàng, hãy chạy mã khi trang cụ thể khởi:

$(document).delegate('#about', 'pageinit', function() { 

    //notice I start the selection with the current page, 
    //this way you only run the code on images on this pseudo-page 
    $(this).find("img.lazy").lazyload(); 
}); 

này nên chỉ làm việc tốt kể từ pageinit sẽ không cháy cho đến sau document.ready cháy.

Cũng thông báo rằng tôi đã sử dụng .delegate() thay vì .live() vì .live() đã bị khấu hao và có thể bị xóa khỏi các bản phát hành trong tương lai.

$(SELECTION).live(EVENT, EVENT-HANDLER); 

là giống như:

$(document).delegate(SELECTION, EVENT, EVENT-HANDLER); 

Và đối với tiền thưởng vòng, tính đến jQuery 1.7, cả hai chức năng trên thực tế bản đồ để .on() và bạn có thể sử dụng .on() trong một dinh thự được giao như vậy :

$(document).on(EVENT, SELECTION, EVENT-HANDLER); 

Tài liệu:

• .live(): http://api.jquery.com/live
• .delegate(): http://api.jquery.com/delegate
• .on(): http://api.jquery.com/on

Lý do mã của bạn làm việc trên trang xem đầu tiên là vì sự kiện window.load được bắn sau khi bạn liên kết với nó trong pageinit xử lý sự kiện, nhưng trên các tải AJAX tiếp theo, bạn sẽ ràng buộc với sự kiện window.load mặc dù sự kiện này sẽ không kích hoạt nữa.