Thủ thuật blogspot - Dautoblog

Tích hợp nhanh Lazy load jquery cho blogspot

Tích hợp nhanh Lazy load jquery cho blogspot
Vấn đề Lazy load jquery nó xưa như trái đất và có rất nhiều bài hướng dẫn.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
- Javascript để ảnh được áp dụng plugin
<script type="text/javascript">
$(function() {    
   $("img").lazyload();
});
</script>
- Thời gian hiện:
Thời gian load ảnh bằng tham số threshold, ảnh sẽ hiển thị khi người dùng cuộn trang tới.
$("img").lazyload({ threshold : 100 });
- Hiệu ứng:
$("img").lazyload({ effect : "fadeIn"});
- Ảnh thay thế:
$("img").lazyload({ placeholder : "img/loading.gif",});
- Sự kiện để hiện ảnh:
$("img").lazyload({ event : "scroll" });
Mặc định là sự kiện scroll thanh trượt, nhưng chúng ta cũng có thể thay đổi với tham số event
Còn vài chức năng khác nữa nhưng không đề cập ở đây.

Áp dụng nhanh plugin lazy load jquery vào blogspot với các yếu tố sau:
- Áp dụng cho toàn bộ ảnh có trong các trang của blogspot.
- Có hiệu ứng fadeIn.
- Đặt thời gian hiện.
- Có ảnh thay thế khi chưa load kịp hoặc ảnh của blogspot bị lỗi.
- Sự kiện để hiện ảnh.
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>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    <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>
  </b:if> 
Lưu mẫu.
Nhận xét
Facebook
Blogger