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 

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!