Tôi đặt tên plugin này là jquery.lazyEverything.js. Thư viện này được kế thừa từ thư viện jquery.lazyload.js, tuy nhiên tôi đã cập nhật để nó có thể sử dụng cho mọi phần tử. Điều này không chỉ những áp dụng cho lazy image mà có thể áp dụng cho mọi trường hợp nếu cần load lazy. Tôi ví dụ như load comment facebook chẳng hạn. Thông thường load trang là mình load ngay comment facebook, nhưng box comment facebook lại hay nằm ở dưới bài viết. Vào mà load ngay cũng ảnh hưởng tới tốc độ trang. Thay vì đó mà kéo tới cuối bài viết mới load thì sẽ tốt hơn rất nhiều.
Các bạn có thể tải thư viện jquery.lazyEverything.js của tôi tại đây
Hướng dẫn cài đặt
<script type="text/javascript" src="jquery.lazyEverything.js"></script>
Hướng dẫn sử dụng
Trong thư viện này tôi có định nghĩa một đối tượng là PageLazy
. Tại đây sẽ chứa các phương thức mà các element
cần load khi được xuất hiện (Khi scroll màn hình tới nó).
function PageLazy() { this.start = function () { var $this = this; $("[data-lazy]").lazyLoadElement({ onLazy: function (element) { var func = element.attr("data-lazy"); if (func != null && func != "") $this[func](element); } }); } }
Như các bạn thấy PageLazy
có phương thức start
. Khi được gọi nó sẽ truy tìm tất cả các element có attribute data-lazy
và gán cho sự kiện nghe ngóng element
xuất hiện khi màn hình scroll tới.
Tôi ví dụ sẽ thực hiện 2 phương thức Lazy Image và lazy Box Comment Facebook
function YourPage() { $.extend(this, new PageLazy()); // element chính thẻ img mà khi màn hình scroll đến this.lazyImage = function (element) { element.attr("src", element.attr("data-src")); } // element chính là vùng mà bạn muốn load comment facebook khi màn hình scroll đến this.lazyFbComment = function(element) { var url = element.attr("data-fb-url"); element.removeAttr("data-fb-url"); var boxComment = $('<div class="fb-comments" data-width="100%" data-href="' + url + '" data-numposts="5"></div>'); element.append(boxComment); if (FB != null) FB.XFBML.parse(element[0]); } }
Trong nội dung html các bạn để các thẻ img
và section
cần load comment facebook như sau
<img data-src='sonpc20.logo.png' data-lazy="lazyImage" /> <section class="comment-container section section-comment" data-lazy="lazyFbComment" data-fb-url="http://sonpc20.com"></section>
Thẻ img
có data-lazy="lazyImage"
trong đó lazyImage
là phương thức được định nghĩa ở YourPage
.
Tương tự như vậy thẻ section
có data-lazy="lazyFbComment"
trong đó lazyFbComment
là phương thức được định nghĩa ở YourPage
Bước cuối cùng là thực thi
Chúng ta khởi tạo đối tượng YourPage
và gọi phương thức start
$(function() { var yourPage = new YourPage(); yourPage.start(); });
Các bạn có thể trải nghiệm trên trang sonpc20.com của tôi với 2 phương thức lazy trên. Các bạn thử kéo xuống chân bài viết này thì box comment mới được tải lên.
Chúc các bạn sử dụng thư viện jquery.lazyEverything.js của tôi hiệu quả.
Sơn20