Cài đặt Jquery Lazy Load cho BlogSpot

Làm cách nào để cài đặt Jquery Lazy Load cho Blog BlogSpot? Làm thế nào để Tối ưu hóa Blog Blogger để tải nhanh hơn? Làm cách nào để bạn tăng gấp đôi tốc độ tải blog của bạn? Bạn có muốn plugin LazyLoad trên blog của mình không? Để tăng chỉ số tốc độ trang của bạn? Tôi sẽ chỉ bạn cách tăng tốc blog blogger bằng cách sử dụng Lazy Load Script. 

Cài đặt Jquery Lazy Load cho BlogSpot

Vì hình ảnh là một trong những loại nội dung phổ biến nhất trên web nên thời gian tải trang có thể dễ dàng trở thành một vấn đề trên các trang web.

Lazy Image loading là gì?

Lazy Image Loading có nghĩa là tải hình ảnh không đồng bộ trên một trang web, tức là sau khi nội dung ở nửa trên của trang đã được tải hoàn toàn hoặc thậm chí chỉ ở một mức độ hạn chế khi chúng xuất hiện trong khung nhìn của trang web. Điều này có nghĩa là hình ảnh ở cuối trang thậm chí sẽ không tải trừ khi người dùng liên tục cuộn.

Trì hoãn hình ảnh ngoài màn hình

Trì hoãn tải hình ảnh xuất hiện dưới màn hình đầu tiên để hiển thị nội dung trang trong màn hình đầu tiên nhanh hơn.

Độ trễ hình ảnh ngoài màn hình có nghĩa là sẽ có độ trễ trong việc tải hình ảnh xuất hiện ở cuối trang trên trang. Điều này đảm bảo rằng nội dung ở nửa trên của trang hiển thị nhanh hơn. Hướng dẫn này cung cấp thông tin chi tiết. Nó mô tả cách chúng ta có thể trì hoãn hình ảnh tắt màn hình trong các tình huống khác nhau.

Cách sử dụng:

  • Bước 1: Đăng nhập vào Blogger 
  • Bước 2: Vào chỉnh sửa HTML
  • Bước 3: Chèn đoạn code bên dưới trên thẻ </body>
<script>
//<![CDATA[
!function(u,i,t){var a,r,o=[],c=/p/.test(i.readyState),s="IntersectionObserver",f=/^data-(.+)/,e="pageshow",l="lazied",d="length",n="Attribute",h="SCRIPT",m="load",v="forEach",p="has"+n,y="nodeName",b="set"+n;function g(e,n,t,o){return o=(n?i.getElementById(n):r)||i.createElement(e||h),n&&(o.id=n),t&&(o.onload=t),o}function I(e){return[].slice.call(e.attributes)}function E(e){i.head.appendChild(e)}function N(e,n){return[].slice.call((n||i).querySelectorAll(e))}function x(e){a(function(o){o=N(e||"[type=deferjs]"),function e(n,t){(n=o.shift())&&(n.parentNode.removeChild(n),(t=function(e,n,t,o,i){for(n=g(e[y]),i=0,t=I(e);i<t[d];i++)"type"!=(o=t[i]).name&&n[b](o.name,o.value);return n.text=e.text,n}(n)).src&&!t[p]("async")?(t.onload=t.onerror=e,E(t)):(E(t),e()))}()})}function C(e,n,t,o,i){for(o=0,t=I(e);o<t[d];o++)(i=f.exec(t[o].name))&&e[b](i[1],t[o].value);N("source",e)[v](C),m in e&&e[m](),n&&(e.className+=" "+n)}(a=function(e,n){c?t(e,n):o.push(e,n)}).all=x,a.js=function(n,t,e,o){a(function(e){(e=g(r,t,o)).src=n,E(e)},e)},a.css=function(n,t,e,o){a(function(e){(e=g("LINK",t,o)).rel="stylesheet",e.href=n,E(e)},e)},a.dom=function(e,n,i,r,c){a(function(t,n){function o(e){r&&!1===r(e)||C(e,i)}n=s in u?(t=new u[s](function(e){e[v](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),o(n))})},c)).observe.bind(t):o,N(e||"[data-src]")[v](function(e){e[p](l)||(e[b](l,e[y]),n(e))})},n)},a.reveal=C,u.addEventListener("on"+e in u?e:m,function(){for(c=!x();o[0];)a(o.shift(),o.shift())}),u.Defer=a}(this,document,setTimeout);
  //]]>
</script>

<script>
//<![CDATA[
            Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"});
        //]]>
        </script>



src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD2AAAA9gBbkdjNQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAANSURBVAiZY2BgYGAEAAAGAAKHf+MhAAAAAElFTkSuQmCC' width='675' height='300'



img.lazyload{background: #fff linear-gradient(to right, #f6f6f6, #f1f1f1, #ececec, #f1f1f1, #f6f6f6); background-size: 150% 100%; animation-duration: .6s; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: ease-out;}@-webkit-keyframes placeHolderShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}@keyframes placeHolderShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

Lời kết

Đây là tất cả những gì bạn phải làm. Bằng cách thêm một tập lệnh đơn giản, blog của bạn giờ đây sẽ load ổn định hơn. Nếu có thắc mắc hãy để lại comment.