Cách tải hình ảnh sau khi cuộn trang cho blogger

Một trong những yếu tố góp phần vào việc tốc độ tải trang blog của các bạn load chậm là nội dung hình ảnh, sau đây Welax IT sẽ cung cấp các mẹo về cách tải hình ảnh sau khi cuộn trang cho blogger .

Tải hình ảnh sau khi cuộn trang cho blogger ở đây là khi tải trang hình ảnh sẽ không được tải cho đến khi chúng ta cuộn trang khi bắt đầu xem trang và điều đó nó sẽ làm tăng tốc độ tải trang của blog bạn lúc bạn đầu.

Cách tải hình ảnh sau khi cuộn trang cho blogger

Đầu tiên, mở Blogger > Nhấp vào menu Chủ đề > Nhấp vào Chỉnh sửa HTML > Sau đó tìm và thêm mã bên dưới trước</body>

Mã 1

<script>

//<![CDATA[

// LazyLoad

function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

Đối với bạn bè đã thêm mã Lazysizes, chỉ cần thay thế mã bằng phiên bản này

Mã 2

<script>

//<![CDATA[

// Lazysizes

var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);

//]]>

</script>

Ví dụ cài đặt

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Thêm class='lazy'cho Mã 1 hoặc class='lazyload'cho Mã 2 trong đánh dấu như thế này:

<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Thay đổi src thành data-src và thêm src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' sau data-src

Hoặc ví dụ này:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

Vì vậy, như thế này:

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Làm như trên cho tất cả các đánh dấu img trên chủ đề. Điều gì sẽ xảy ra nếu đánh dấu img đã chứa một lớp? Sau đó, bạn chỉ cần thêm lazy hoặc lazyload sau lớp đầu tiên, ví dụ:

<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Khi hoàn tất, hãy lưu chủ đề và xem kết quả trên blog của bạn.

" We share content only for testing purpose, not for commercial use. If you have money then we strongly recommend to buy it from original authors because they put really hard work in making it. They will be your best support. Use at your OWN RISK "