OBin's Blog: lazy load

Lazy Load là một plugin của JQuery dùng để tải hình ảnh ở các website hoặc blog nội dung có nhiều ảnh. Sử dụng Lazyload giúp cho trang web load nhanh hơn, phần nội dung của trang web sẽ được load lên trước sau đó khi người dùng kéo chuột đến đâu Lazyload sẻ load hình ảnh đến đó, một số trường hợp nó còn có tác dụng giảm tải cho Web Server.

Sau đây là cách sử dụng Lazy load và cách dùng trong những trường hợp khác nhau:

Đặt trong thẻ <head>

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

Sử dụng mặc định: Ví dụ với một image

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<script>
$(function() {
    $("img.lazy").lazyload();
});

</script>

Sử dụng với Threshold :
Mặc định hình ảnh sẻ load ngay khi xuất hiện trên màn hình, nhưng nếu bạn cài đặt option này thì hình ảnh sẻ load trước khi xuất hiện trên màn hình ( trong ví dụ là 200px )

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

Sử dụng với một sự kiện tương tác:
Tức là chỉ khi có sự kiện tương tác nào đó thì hình ảnh sẻ được load lên ví dụ như click, mouseover:

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

hoặc một sự kiện tùy chỉnh ( load sau 5 giây)

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

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Sử dụng với một hiệu ứng:
Mặc định plugin sẽ chờ hình ảnh load xong và gọi hàm show(). Bạn có thể sử dụng bất kì hiệu ứng nào bạn muốn. Ví dụ:

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

Sử dụng với trình duyệt "Non Javascript"
Mặc định trình duyệt lúc nào cũng bật Javascript, nhưng đôi lúc bị tắt đi bởi người dùng. Trường hợp này ta làm như sau:

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

Để tránh việc xuất hiện cùng lúc 2 hình ảnh giống nhau ta thêm code css sau:

.lazy {
     display: none;
 }

Thêm đoạn code sau để bật Javascript cho trình duyệt:

$("img.lazy").show().lazyload();

Sử dụng khi hình ảnh bên trong một thẻ bao với thanh cuộn

Code Css:

 #container vị trí {
     height: 600px;
     overflow: scroll;
 }

Code Js:

$("img.lazy").lazyload({
     container: $("#container")
});

Kiểm soát số lượng hình ảnh được load :

$("img.lazy").lazyload({
    failure_limit : 10
});

Đối phó với những hình ảnh "Invisible":

$("img.lazy").lazyload({
    skip_invisible : true
});

Download toàn bộ source code và ví dụ cụ thể tại đây

Chúc các bạn thành công!

Xem thêm:

- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Basic jQuery Slider - Slider đơn giản dễ sử dụng trong thiết kế web
- Code popup quảng cáo nằm dưới trình duyệt (popup under)

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp