Lazy Load - Hiệu ứng load ảnh tuần tự và mượt mà cho Blogger

Chào các bạn, nếu trang web/blog của bạn là một trang chuyên chia sẻ hình ảnh hoặc là một trang có nhiều hình ảnh hiển thị thì một 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 một hiệu ứng load ảnh nhẹ nhàng và mượt mà có tên Lazy Load.
Nói đơn giản hiệu ứng này sẽ thay thế những hình ảnh chưa load xong bằng một hình ảnh khác, rồi sau đó sẽ dùng hiệu ứng fadeIn trong javascript để load ảnh đó. Gợi cho ta cảm giác mượt mà và dễ chịu khi nhìn vào!
Xem demo

Các bước thực hiện

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>

Chỉnh sửa

• 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).