 | |||
|
Tên của Plugin này là jquery image lazy-loading
Thực ra biết tới cái plugin cũng lâu lâu rồi, nhưng nay mới có dịp tìm hiểu nó một chút.
Để xem plugin này của jquery làm được những gì, mời bạn ghé qua thăm http://etin.vn
Tôi không biết trang web này họ sử dụng thư viện gì hay họ tự phát triển, nhưng plugin này làm được tương tự như trang web trên.
Hãy để ý những bức ảnh khi bạn kéo thành scrollbar nhé, khi ảnh xuất hiện thì cũng có nghĩa là nó bắt đầu load, như vậy tạo ra một hiệu hứng khá hay và đẹp mắt, image được load từng đoạn một nên cũng có nghĩa là giảm tải được cho server và tốc độ load trang web của bạn về mặt nào đó cũng được cải thiện.
Để sử dụng plugin này cũng tương tự như những plugin khác, bạn copy đoạn code sau và đặt trong thẻ header trang web của bạn.
File thư viện jquery nếu trang web của bạn đã có sẵn rồi thì không cần thiết nữa
plugin jquery lazyload thì bạn có thể download tại đây và nhớ đặt lại dường dẫn tới file đó cho phù hợp.
Kế tiếp bạn thêm đoạn mã sau để có thể sử dụng plugin này
$(function(){$(“img”).lazyload();})
Như vậy có nghĩa là tât cả các images trong trang web của bạn đều được “lazyload”, nếu một lý do nào đó mà bạn chỉ muốn sử dụng cho một phần trang web ví dụ như chỉ phần nội dung trang web giả sử có id=”content” chẳng hạn, bạn thay đoạn mã trên bằng đoạn mã như dưới đây
$(“#content img”).lazyload();
Trên đây là sử dụng jquery lazy load với cấu hình mặc định. Bạn cũng có thể tùy biến một số chức năng như sau:
Thiết lập độ nhạy:
Mặc định load 200 điểm ảnh trước
thay
$(“img”).lazyload();
Bằng
$(“img”).lazyload({ threshold : 200 });
Thiết lập hình ảnh giữ chỗ và sự kiện tùy chỉnh để kích hoạt tải:
$(“img”).lazyload({ placeholder : ”img/grey.gif” });
Nếu không đặt tùy chọn này, mặc định một ảnh có kích thước 1×1 pixel màu trắng được sẽ sử dụng
Đặt sự kiện khi ảnh được load:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
event : ”click”
});
Trên đây là sự kiện click, bạn cũng có thể đặt sự kiện là hover hay sự kiện khác theo ý bạn.
Đặt hiệu ứng:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
effect : ”fadeIn”
});
Trên đây chúng ta sử dụng hiệu ứng faceIn, Bạn cũng có thể sử dụng hiệu ứng khác như slideUp, slideDown….
Đặt đường bao cho các ảnh:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
container: $(“#container”)
});
Đặt đường bao cho các ảnh khi được load, ở đây sử dụng thẻ có ID là “container“. Điều này tương tự như thanh scroll của web site khi một trang web quá dài. Nhưng ở đây chúng ta áp dụng cho ảnh khi ảnh quá nhiều
Trên đây là thiết lập một số tùy chọn của jquery lazyload. Bạn có thể tham khảo thêm tại website chính thức của lazyload tại đây
Sưu Tầm
- Thư viện cache.php - Cache website
- 10 thủ thuật quảng bá Web giúp bạn tạo tiêu đề bài viết hấp dẫn người đọc và máy tìm kiếm.
- Hướng dẫn cài đặt Memcache cho VBB
- Custome Style với PHP và CSS
- Tạo website cá nhân dễ dàng với SnapPages.com
