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.

Tích hợp nhanh Lazy load jquery cho 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.
Publis: 

4 comments

  1. DVD sang thăm nhà, chúc HLong tuần mới an lành!

    http://www.hathaykhongbanghayhat.org/sites/default/files/images//chim.jpg

    1. Cảm ơn bác sang chơi!
      Chúc bác tuần mới an lành.
  2. Nói ngắn gọn hơn là copy luôn bước 2 và dán :D Nói lòng vòng lát không hiểu gì luôn :( Khổ quá mà :(
  3. Cũng chả muốn lòng vòng vì anh google hay nhắc nhở bài ít nội dung :))
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji