Tăng tốc cho Blogger với LazyLoad Plugin

Lazyload là một Plugin Jquery sử dụng cho việc load hình ảnh trên trang web. Công dụng của nó là các hình ảnh chỉ hiển thị trong tầm mắt bạn nhìn thấy được trên trình duyệt và khi bạn di chuyển thanh cuộn của trình duyệt tới đâu thì hình ảnh khu vực đó mới được nạp và hiển thị, điều này sẽ giúp cải thiện tốc độ tải trang của bạn đi đáng kể khi blog của bạn sử dụng nhiều hình ảnh. Bạn có thể xem demo tại đây hoặc tại đây

Xem Demo Download Plugin

Cài đặt Lazyload cho Blogger

- Để cài đặt, trước tiên vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Copy đoạn code dưới đây dán nó vào trước thẻ </body>

<!--Lazy Loading-->
<script src='https://65a77fe780fd0d6fd0d7c825fbb01c35124d06df.googledrive.com/host/0BwL0KbT-xOaTZzd4ZldpckNDbUE'></script>
<script>//<![CDATA[
$(function () {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});
//]]></script>

Với đoạn mã trên hình ảnh sẽ được nạp với hiệu ứng fadeIn của jQuery trong đẹp mắt và chuyên nghiệp.

Lưu ý: Template của bạn phải có thư viện jQuery:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
Nếu chưa có Copy và đặt nó trước thẻ </head>

Sử dụng Lazyload cho Blogger

Để sử dụng lazyload, bạn phải thay đổi thẻ hình ảnh của bạn. Địa chỉ hình ảnh của bạn phải được đưa vào thuộc tính data-original và thêm class="lazy" vào thẻ hình ảnh
Ví dụ hình ảnh ban đầu là:

<img src="http://hinh_anh_cua_toi.jpg" width="440" height="280" />

và để áp dụng lazyload bạn phải thay đổi nó lại thành:

<img data-original="http://hinh_anh_cua_toi.jpg" class="lazy" width="440" height="280" />

Như vậy, mỗi khi muốn sử dụng lazyload cho hình ảnh nào thì chỉ việc thay đổi src thành data-original và thêm lớp class="lazy" vào thẻ hình ảnh đó.

Bạn có thể xem thêm các cách tùy biến và sử dụng tại trang chủ của lazyload