Nhưng để áp dụng vào blogspot và khi cuộn trang nhìn thấy ảnh có hiệu ứng của lazy load thì tôi tin là tới 70% anh em áp dụng không thành công(ý tôi muốn nói là ảnh nó cứ trơ ra).
Tiện đây cũng được nhắc lại Lazy Load nhằm làm trễ việc load ảnh trong trang blogspot/web. Ảnh nằm bên ngoài khung hình(nhìn thấy) sẽ không load lên cho đến khi người dùng cuộn trang tới nó.
Sử dụng Lazy Load ở những trang blog/web dài với nhiều hình ảnh sẻ giúp trang được tải nhanh hơn, trong một số trường hợp còn giúp giảm tải cho máy chủ web.Trong thời buổi mà chả riêng gì google coi trọng tốc độ tải trang thì plugin này thấy cũng cần thiết.
Vì với tiêu chí nhanh gọn đơn giản nên chỉ trình bầy cách áp dụng cho toàn bộ ảnh có trong blogspot.
Để áp dụng plugin lazy load jquery cho blogspot, blog bạn cần có:
- Thư viện jquery
- Plugin Lazy Load
Cần biết một số điều kiện để áp dụng
Áp dụng nhanh plugin lazy load jquery vào blogspot
- Áp dụng cho toàn bộ ảnh có trong các trang của blogspot.
- Có hiệu ứng fadeIn.
- Có ảnh thay thế khi chưa load kịp hoặc ảnh của blogspot bị lỗi.
Bước 1
Thêm thư viện jquery nếu blogspot có rồi thì bỏ qua.
Bước 2
Thêm Plugin lazy load jquery
Bạn thêm đoạn javascript bên dưới vào trước thẻ </body>
<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(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})}) //]]> </script>Lưu mẫu.