Hiệu ứng load ảnh Lazy Load cho Blogspot

{tocify} $title = {Mục lục bài viết}

[tintuc]
Hình ảnh là một trong những yếu tố không thể thiếu trong một bài viết trên website. Việc thiếu đi hình ảnh sẽ làm nội dung web trở thành nhàm chán, không hấp dẫn người đọc. Tuy nhiên, ảnh là 1 trong những thành phần nặng nhất nên sẽ ảnh hưởng không nhỏ đến tốc độ tải trang của bạn.

Nếu website hay blogspot của bạn là một trang chuyên share hình ảnh hoặc có nhiều hình ảnh hiển thị thì 1 tiện ích nào đó giúp những hình ảnh đó load tuần từ và lần lượt chắc chắn sẽ rất cần thiết. Trong bài viết này mình xin giới thiệu đến các bạn 1 hiệu ứng load ảnh nhẹ nhàng và mượt mà có tên Lazy Load.

Lazy Load là 1 Plugin jQuery sử dụng cho việc load hình ảnh trên trang web. Thay vì load toàn bộ hình ảnh 1 lần khi tải trang thì với công cụ này nó sẽ load từng ảnh 1. Khi các bạn di chuyển thanh cuộn của trình duyệt tới đâu thì ảnh mới được nạp và hiển thị, khiến hình ảnh xuất hiện trông mượt và chuyên nghiệp hơn. Điều này sẽ giúp giảm tải xử lý cho cả hosting cũng như trình duyệt, tăng tốc load trang, nâng cao trải nghiệm khách hàng.
Để thêm plugin này, các bạn làm theo các bước sau:

Bước 1. Đăng nhập Blogger ➔ Chủ đề (Mẫu) ➔ Chỉnh sửa HTML


Bước 2. Chèn đoạn script sau vào trước thẻ </head> trong template

<script type='text/javascript'>
//<![CDATA[
(function($) { $.fn.lazyload = function(options) { var settings = { threshold : 0, failurelimit : 0, event : "scroll", effect : "show", container : window }; if(options) { $.extend(settings, options); } var elements = this; if ("scroll" == settings.event) { $(settings.container).bind("scroll", function(event) { var counter = 0; elements.each(function() { if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear"); } else { if (counter++ > settings.failurelimit) { return false; } } }); var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }); } this.each(function() { var self = this; if (undefined == $(self).attr("original")) { $(self).attr("original", $(self).attr("src")); } if ("scroll" != settings.event || undefined == $(self).attr("src") || settings.placeholder == $(self).attr("src") || ($.abovethetop(self, settings) || $.leftofbegin(self, settings) || $.belowthefold(self, settings) || $.rightoffold(self, settings) )) { if (settings.placeholder) { $(self).attr("src", settings.placeholder); } else { $(self).removeAttr("src"); } self.loaded = false; } else { self.loaded = true; } $(self).one("appear", function() { if (!this.loaded) { $("<img />") .bind("load", function() { $(self) .hide() .attr("src", $(self).attr("original")) [settings.effect](settings.effectspeed); self.loaded = true; }) .attr("src", $(self).attr("original")); }; }); if ("scroll" != settings.event) { $(self).bind(settings.event, function(event) { if (!self.loaded) { $(self).trigger("appear"); } }); } }); $(settings.container).trigger(settings.event); return this; }; $.belowthefold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).height() + $(window).scrollTop(); } else { var fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).width() + $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollTop(); } else { var fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { if (settings.container === undefined || settings.container === window) { var fold = $(window).scrollLeft(); } else { var fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; $.extend($.expr[':'], { "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" }); })(jQuery);//]]>
</script>
<script type="text/javascript">
$(function() { $("img") .lazyload({ placeholder : "https://2.bp.blogspot.com/-8wGWeetqFJs/WMFH81Oo4zI/AAAAAAAAAEg/UsvLH1YtG7UxLqWPWmFYFHe8m2ZyiWzdwCLcB/s1600/www-bacsiwindows-com.jpg", effect: "fadeIn" }); });</script>

• Lưu ý: Thay link màu đỏ thành link ảnh thay thế khi chưa load ảnh xong.
• Thẻ img là áp dụng cho tất cả hình ảnh trong blog, nếu bạn muốn giới hạn một thành phần nào đó thì chỉ cần sửa lại: #content-wrapper img hoặc #PopularPosts1 img,...

Bước 3: Lưu chủ đề (mẫu)

Với ba bước đơn giản như vậy là các bạn đã hoàn thành việc thêm plugin này rồi, nếu có thắc mắc hay góp ý hãy để lại comment bên dưới nhé.

 [/tintuc]