Tuesday, 18/09/2018
News
Home » Wordpress » Plugin Wordpress » Tăng tốc độ website với Plugin LazyLoad

Tăng tốc độ website với Plugin LazyLoad

Thông thường, website của bạn sẽ tải toàn bộ hình ảnh cùng một lúc và nếu như có rất nhiều hình ảnh thì sao? Điều này sẽ khiến cho website của bạn rất chậm chạp.

Sử dụng Plugin LazyLoad sẽ giúp trang web của bạn tải nhanh hơn. Trong một số trường hợp nó cũng sẽ giúp giảm tải máy chủ.

LazyLoad hoặt động như thế nào?

Ngay từ cái tên gọi của nó “Lazy”. Hình ảnh trên website chỉ được tải khi người dùng kéo thanh cuộn gần đến phần nội dung. Hình ảnh nào chuẩn bị xem thì mới được trình duyệt load thay vì load toàn bộ ngay từ đầu. Do đó tốc độ website sẽ được cải thiện đáng kể, cũng như giảm tải cho máy chủ vì đôi khi không phải toàn bộ hình ảnh trên trang web của bạn đều được người dùng xem hết, việc không tải những hình ảnh mà người dùng không bao giờ xem đến sẽ tiết kiệm được rất nhiều thời gian tải, cũng như tài nguyên hệ thống.

Hình ảnh chỉ được tải khi nó lọt vào tầm nhìn của người dùng!

Nói gì thì nói, xem Demo trước cái đã.

Một số trang demo: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images load images using timeout, load images using AJAX.

Lưu ý: khi thử nghiệm các bản demo thì bạn cần xóa cache của trình duyệt trước khi load trang!

Sử dụng như thế nào?

Lazyload là plugin của Jquery, do đó bạn sẽ phải cần thư viện Jquery. Thêm đoạn sau vào giữa cặp thẻ <head></head>

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

Để sử dụng thì bạn chỉ cần sử dụng:

$(function() {
    $("img").lazyload();
});

Trong trường hợp bạn chỉ muốn dùng cho những hình ảnh nào có class=”lazy” thì thêm như sau:

$(function() { $("img.lazy").lazyload(); });

Tùy chỉnh nâng cao

Đặt ngưỡng

Mặc định hình ảnh chỉ được tải khi nó xuất hiện trên màn hình. Bạn có thể tùy chỉnh cho nó tải trước hoặc sau khi xuất hiện trên màn hình bằng cách dùng threshold

Ví dụ hình ảnh sẽ được tải khi nó cách màn hình 200px

$("img").lazyload({
    threshold : 200
});

Dùng các sự kiện để tải

Sử dụng các sự kiện trong jQuery như click hoặc mouseover. Ví dụ chỉ load hình ảnh khi người dùng click vào.

$("img").lazyload({
    event : "click"
});

Sử dụng hiệu ứng

Ví dụ sử dụng hiệu ứng fadeIn

$("img").lazyload({
    effect : "fadeIn"
});

Dùng Lazyload cho container

Bạn muốn dùng lazyload cho một phần tử trong trang mà phần tử đó có thể scroll được? Giả sử phần tử đó có style thế này:

#container {
    height: 600px;
    overflow: scroll;
}
$("img").lazyload({
     container: $("#container")
});

Tải về LazyLoad

Đầy là toàn bộ source code plugin Lazyload cho Jquery

[Download] [minified]

Với WordPress bạn có thể sử dụng các Plugin Lazyload bằng cách tìm kiếm trên thư viện. Có rất nhiều Plugin Lazyload được phát triển. Bài sau mình sẽ giới thiệu về những Plugin này :)

Thông thường, website của bạn sẽ tải toàn bộ hình ảnh cùng một lúc và nếu như có rất nhiều hình ảnh thì sao? Điều này sẽ khiến cho website của bạn rất chậm chạp. Sử dụng Plugin LazyLoad sẽ giúp trang web của bạn tải nhanh hơn. Trong một số trường hợp nó cũng sẽ giúp giảm tải máy chủ. LazyLoad hoặt động như thế nào? Ngay từ cái tên gọi của nó "Lazy". Hình ảnh trên website chỉ được tải khi người dùng kéo thanh cuộn gần đến phần nội dung. Hình ảnh nào chuẩn bị xem thì&hellip;

Review Overview

0
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (3 votes, average: 10.00 out of 10)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

:cuoi: :hix: :hihihi: :kiss: :sexy: :dotay: :ngacnhien: :oh: :love: more »