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, "300:200")' 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, "300:200")' 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.
إرسال تعليق