Hiện nay việc tối ưu tải trang cho blogspot đang được nhiều bạn quan tâm chú ý. Một trong số đó là tạo lazy load cho những phần không quan trọng khi tải bài đăng lên màn hình. Ở bài này mình sẽ hướng dẫn cho các bạn mẹo hay cách tại lazy load cho mục bình luận khiến cho trang bài đăng được tải lên nhẹ hơn và mượt hơn. Các bạn lưu ý là khi tải bài lên thì mục bình luận sẽ không cần phải được tải lên ngay lập tức nhé. Vì lúc đó độc giả chú tâm đến tiêu đề, nội dung quan trọng bên trên hơn. Do đó phần comment có thể được tải chậm lên sau cũng không ảnh hưởng đến trải nghiệm cho người đọc bao nhiêu cả.

Phần bình luận của blog bao gồm hai phần là khung comment và nội dung comment. Khi bài đăng không có bình luận nào thì chỉ có khung comment mà thôi. Còn khi bài đăng có bình luận thì đó là nội dung comment.



Cách làm mình sẽ hướng dẫn cho hai template kiểu cũ và kiểu mới nhất bây giờ cho các bạn dễ làm


Vào chỉnh sửa mẫu template chọn chuyển đến tiện ích Blog1


I. ÁP DỤNG VỚI BLOG LAYOUT V1 & WIDGET V1 HOẶC ĐÃ NÂNG CẤP BLOG LAYOUT LÊN V2, V3 NHƯNG VẪN GIỮ WIDGET V1


Bước 1: Mở rộng thẻ <b:includable id='comment-form' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:


<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

</script>


thành nội dung:


<script>//<![CDATA[

$(window).on('load', function() {

  $('.comment-form').addClass('spinner').addClass('load')

  setTimeout(function() {

    $('.comment-form').append("<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>");

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0')

      $('.comment-form').removeClass('spinner').removeClass('load')

    })

  }, 2000)

})

//]]></script>


Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threaded-comment-form' var='post'> (Bài viết có nhận xét sẽ load thẻ này)


Bước 3: Mở rộng thẻ <b:includable id='threaded_comment_js' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:


<script>//<![CDATA[

$('.comments-content').addClass('hidden')

$(window).on('load', function() {

  setTimeout(function() {

    $.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {

      $('.comments-content').removeClass('hidden')

    })

  }, 2000)

})

//]]></script>

<b:template-script inline='true' name='threaded_comments'/>

<script type='text/javascript'>

  blogger.widgets.blog.initThreadedComments(

  <data:post.commentJso/>,

  <data:post.commentMsgs/>,

  <data:post.commentConfig/>);

</script>


Bước 4: Mở rộng thẻ <b:includable id='threaded_comments' var='post'> (Đưa nội dung nhận xét nằm dưới khung nhận xét) di chuyển nội dung bên dưới:


<p class='comment-footer'>

  <b:if cond='data:post.allowNewComments'>

    <b:include data='post' name='threaded-comment-form'/>

  <b:else/>

    <data:post.noNewCommentsText/>

  </b:if>

</p>


nằm trên nội dung:


<div class='comments-content'>

  <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='threaded_comment_js'/>

  </b:if>

  <div id='comment-holder'>

    <data:post.commentHtml/>

  </div>

</div>


thành đoạn HTML như sau:


<p class='comment-footer'>

  <b:if cond='data:post.allowNewComments'>

    <b:include data='post' name='threaded-comment-form'/>

  <b:else/>

    <data:post.noNewCommentsText/>

  </b:if>

</p>

<div class='comments-content'>

  <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='threaded_comment_js'/>

  </b:if>

  <div id='comment-holder'>

    <data:post.commentHtml/>

  </div>

</div>


II. ÁP DỤNG VỚI BLOG LAYOUT V2, V3 & WIDGET V2


Bước 1: Mở rộng thẻ <b:includable id='commentForm' var='post'> (Bài viết không có nhận xét sẽ load thẻ này) tìm thay thế nội dung bên dưới:


<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);

</script>


thành nội dung:


<script>//<![CDATA[

$(window).on('load', function() {

  $('.comment-form').addClass('spinner').addClass('load')

  setTimeout(function() {

    $('.comment-form').append("<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' id='comment-editor' name='comment-editor' src='' height='93px' width='100%'></iframe>");

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

      $('.comment-form').removeClass('spinner').removeClass('load')

    })

  }, 2000)

})

//]]></script>


Bước 2: Làm tương tự như Bước 1 với thẻ <b:includable id='threadedCommentForm' var='post'> (Bài viết có nhận xét sẽ load thẻ này)


Bước 3: Mở rộng thẻ <b:includable id='threadedCommentJs' var='post'> (Bài viết có nhận xét sẽ load thẻ này) thay hết nội dung bên trong thành:


<script>//<![CDATA[

$('.comments-content').addClass('hidden')

$(window).on('load', function() {

  setTimeout(function() {

    $.getScript('//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js').done(function() {

      $('.comments-content').removeClass('hidden')

    })

  }, 2000)

})

//]]></script>

<b:template-script inline='true' name='threaded_comments'/>

<script type='text/javascript'>

  blogger.widgets.blog.initThreadedComments(

  <data:post.commentJso/>,

  <data:post.commentMsgs/>,

  <data:post.commentConfig/>);

</script>


Bước 4: Mở rộng thẻ <b:includable id='threadedComments' var='post'> (Đưa nội dung nhận xét nằm dưới khung nhận xét) di chuyển nội dung bên dưới:


<p class='comment-footer'>

  <b:if cond='data:post.allowNewComments'>

    <b:include data='post' name='threadedCommentForm'/>

  <b:else/>

    <data:post.noNewCommentsText/>

  </b:if>

</p>


nằm trên nội dung:

<div class='comments-content'>

  <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='threadedCommentJs'/>

  </b:if>

  <div id='comment-holder'>

    <data:post.commentHtml/>

  </div>

</div>


thành đoạn HTML như sau:


<p class='comment-footer'>

  <b:if cond='data:post.allowNewComments'>

    <b:include data='post' name='threadedCommentForm'/>

  <b:else/>

    <data:post.noNewCommentsText/>

  </b:if>

</p>

<div class='comments-content'>

  <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='threadedCommentJs'/>

  </b:if>

  <div id='comment-holder'>

    <data:post.commentHtml/>

  </div>

</div>


III. CSS SỬ DỤNG CHUNG

.comments-content.spinner:before {

  content:'';

  box-sizing:border-box;

  position:absolute;

  top:45%;

  left:47%;

  width:36px;

  height:36px;

  border-radius:50%;

  border:3px solid hsl(0,0%,53.3%);

  border-right-color:transparent;

  animation:spinner .9s linear infinite;

  -webkit-animation:spinner .9s ease-in-out infinite;

}

.comment-form.load {

  position: relative;

  height:200px;

  width:100%;

}

@keyframes spinner {

  to {

    transform:rotate(360deg);

  }

}

@-webkit-keyframes spinner {

  to {

    -webkit-transform:rotate(360deg);

  }

}

.comments-content.hidden {

  display:none;

}


*LƯU Ý: Trong mẫu template cần có thư viện link jquery.js nếu chưa có thì thêm trước thẻ </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/> // Có thể sử dụng phiên bản thấp hơn ví dụ 1.7.1


Tham khảo; https://www.facebook.com/kequaduongvodanh