1 Plugin jquery lazyload – load từng ảnh trên trang web Tue Nov 01, 2011 4:07 pm
El Kun
Super Moderator
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 một tạp chí khá nổi tiếng về IT đó là : [You must be registered and logged in to see this link.]
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 [You must be registered and logged in to see this link.]
Kế tiếp bạn thêm đoạn mã sau để có thể sử dụng plugin này
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
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
Thiết lập hình ảnh giữ chỗ và sự kiện tùy chỉnh để kích hoạt tải:
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:
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:
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:
Đặ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
vinasupport
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 một tạp chí khá nổi tiếng về IT đó là : [You must be registered and logged in to see this link.]
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.
- Code:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script> <script src=”duong_dan_toi_file/jquery.lazyload.js” type=”text/javascript”></script>
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 [You must be registered and logged in to see this link.]
Kế tiếp bạn thêm đoạn mã sau để có thể sử dụng plugin này
- Code:
$(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
- Code:
$(“#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
- Code:
$(“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:
- Code:
$(“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:
- Code:
$(“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:
- Code:
$(“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:
- Code:
$(“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
vinasupport