Thêm hiệu ứng lazyload ảnh vào blogspot

Xin chào các bạn. Hôm nay mình muốn giới thiệu tới các bạn thủ thuật làm thế nào để tạo hiệu ứng Lazy Load cho blogspot. Nếu blogspot của bạn quá "cồng kềnh" với trang chủ hay trong mỗi bài viết thì thủ thuật này sẽ cứu được blog của bạn trong mắt khách hàng và các công cụ tìm kiếm đấy. Ngay bây giờ hãy cùng Star Tuấn Blog tạo hiệu ứng Lazy Load cho blog của bạn nhé. Cũng khá đơn giản thôi !


1. Hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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(){$("img").lazyload({placeholder:"https://lh5.googleusercontent.com/-NkR_NSweopU/V8OktAG8VxI/AAAAAAAAD2c/xPXdM_PM-OA9VBqDK7pf0qgV1FMHJpsqQCK4B/s1600/startuan.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Nếu blog bạn chưa thêm jquery thì thêm đoạn code sau dưới thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'>
</script>
2. Bước cuối cùng là lưu lại và tận hưởng thành quả của bạn vừa làm.

Hãy để lại comment nếu như bạn có bất kỳ khó khăn hay thắc mắc nào khi làm thủ thuật này với blog của bạn nhé. Nếu bạn thấy các bài viết trên Star Tuấn Blog hay và có giá trị bạn hãy like và subcribe email để nhận tin tức mới nhất từ Star Tuấn Blog nha bạn. Cảm ơn các bạn rất nhiều !

Thêm hiệu ứng lazyload ảnh vào blogspot Reviewed by Trương Ngọc Tuấn on 7/17/2016 05:00:00 CH Rating: 5

1 nhận xét:

✩ Viết tiếng Việt có dấu
✩ Không spam
✩ Không chửi tục, nói bậy
✩ Không quảng cáo thông qua khung Comment.

Adblock Detected

Xin Chào!

Có vẻ bạn đang sử dụng tiện ích chặng quảng cáo

Vui lòng vô hiệu hóa tiện ích chặn quảng cáo để ủng hộ blog

Cảm ơn

10
All Rights Reserved by Star Tuấn Blog | Thủ thuật, Ảnh bìa chất © 2015 - 2017
Powered By Blogger, Designed by Star Tuấn - Facebook
Được tạo bởi Blogger.