Tốc độ tải trang luôn là tiêu chí các webmaster đặt lên hàng đầu. Ảnh là tác nhân có ảnh hưởng rất lớn tới tiêu chí này. Muốn đẹp thì không nhanh mà muốn nhanh thì lại không đẹp !! Vậy có phương án nào vừa có nhiều ảnh mà vừa load trang nhanh không. Lazy Load Image được sinh ra để khắc phục vấn đề trên.
Với blog thông thường, khi bạn truy cập vào trang, tất cả ảnh sẽ được tải cùng 1 lúc nhưng với lazy load, nó sẽ chỉ tải những ảnh nằm trong khung nhìn. những ảnh khác khi bạn lăn chuột xuống sẽ được tải tuần tự.
Chắc chắn khi tích hợp plug in này tốc độ tải trang của bạn sẽ nhanh hơn khi chưa tích hợp (trong trường hợp blog có nhiều ảnh).
Giới thiệu sơ sơ cũng kha khá rồi, giờ bắt đầu thủ thuật thôi. Thủ thuật rất đơn giản chỉ có 1 đoạn script nên bạn có thể dễ dàng tích hợp hoặc gỡ ra tùy thích
➦ Đăng nhập vào blogger
➦ Chọn chế độ chỉnh sửa HTML
➦ Thêm thư viện Jquery nếu như template của bạn chưa có
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
Hoặc
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
➦ Dán đoạn mã sau trước thẻ đóng </body>
<b:if cond='data:blog.isMobileRequest == "false"'> <script type='text/javascript'> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})}) //]]></script> </b:if>
➦ Lưu mẫu sau đó vào blog của bạn để kiểm tra (với bài đăng nhiều ảnh nhé, lẻ tẻ vài tấm sẽ không thấy được sự khác biệt)
➤ Mở rộng bạn có thể giới hạn khi nào đoạn js trên được thực thi bằng việc thay đổi thẻ <b:if>. Tham khảo bài viết Thẻ điều kiện b:if đầy đủ cho blogspot để biết thêm
Chúc bạn thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên