22-04-2015
Tăng tốc web với Plugin
Lazyload của Jquery
Đẩy nhanh tốc độ tải web
bằng cách tải nội dung web
trước, và tải hình ảnh liên
quan sau. Phương pháp này,
sẽ tiết được cả khối thời
gian nếu trang web dài và
có nhiều hình ảnh.
Thấy tutsplus.com đang
dùng plugin này, trông cũng
khá hay, nên viết bài chia sẽ
với mọi người .
Giới thiệu:
Plug in Lazyload được phát
triển bởi Matt Mlinac và
nằm trong chuỗi dữ án YUI
ImageLoader Utility
Công dụng:
Như cái tên gọi của nó:
“Lazy”. Hình ảnh trên web
của bạn sẽ được bị delay lại
để tải sau, do đó thay vì tải
hình, trình duyệt sẽ lo phần
nội dung text trước. Tốc độ
được cải thiện đáng kể.
Plugin này thật sự hữu í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.
Demo:
http://www.appelsiini.net/projects/lazyload/enabled.html
Hướng dẫn sử dụng
Lazyload:
Lazyload là plugin của
Jquery, do đó nhất dịnh bạn
sẽ phải cần thư viện Jquery
rồi. 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>
Xong, để sử dụng lazy load
bạn chỉ cần một câu lệnh
đơn giản:
$("img").lazyload();
Các tùy chỉnh nâng cao:
+) Load một vài pixel trước
khi hiện ảnh
Bạn có thể tùy chỉnh thời
gian load ảnh bằng cách
thêm tham số threshold,
ảnh sẽ được hiển thị khi
người dùng scroll tới và
trình duyệt tải được số pixel
nhất định:
$("img").lazyload({ threshold : 100 });
Đặt threshold thành 100,
tương đương với ảnh sẽ
được hiện khi nó load được
100 pixel. Mặc định
threshold là 0 tức sẽ hiện
ngay khi người dùng thấy
bóng dáng của nó.
Ảnh thay thế, khi chưa
load xong
Trong thời gian, người dùng
chờ trình duyệt tải ảnh về.
Bạn có thể dùng một tấm
ảnh khác để thay thế nó
bằng tham số placeholder
$("img").lazyload({ placeholder : "img/grey.gif" });
Cài này còn thay thế trong
trường hợp ảnh chính không
thể load được.
Thêm sự kiện trước khi
load ảnh
Bạn có thể thêm một sử
kiện trước khi ảnh được
load.
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
Như đoạn code trên, ảnh sẽ
được load khi người dùng
click lên tấm ảnh.
Thêm tí hiệu ứng
Rất đơn giản, bạn có thể sử
dụng tham số effect để làm
điều này.
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
Hiệu ứng fade in có sẵn có
jquery.
Demo:
http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
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;
}
Bạn vẫn có thể dùng
Lazyload cho nó, với cú
pháp như sau:
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});
BONUS thêm: Delay load
ảnh sau môt khoảng thời
gian nhất định
Cái này thực chất không
phải là chức năng của
lazyload, chỉ là một mẹo
nhỏ sử dụng thư viện code
của lazyload để thực hiện.
Bạn không thích chuyện khi
người dùng scroll tới thì
hình mới hiện? Bạn chỉ
muốn nó bị delay một chút
xíu để load nội dung trước
thôi? okê xem đoạn code
sau:
$(function() {
$("img:below-the-fold")
.lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind("load",
function() {
var timeout = setTimeout
(function() {$("img").trigger
("sporty")}, 5000);
});
Như trong đoạn code trên,
hình sẽ chỉ bị delay 5s sau
khi nội dung text được load
xong xuôi. Không cần phải
chờ người dùng scroll tới thì
nó mới load.
Tải Plugin Lazyload
Đầy là toàn bộ source code
plugin Lazyload cho Jquery
(.js).
Download:
Full:
http://www.appelsiini.net/download/jquery.lazyload.js
Bản nén:
http://www.appelsiini.net/download/jquery.lazyload.mini.js
Nếu không thích thêm thủ
công, bạn có thể dùng Plug
In Lazyload cho mã nguồn
mà bạn dang dùng.
WordPress
Download
Tải Plugin cho wordpress
https://wordpress.org/plugins/jquery-image-lazy-loading/
Joomla
Download
Tải Plugin cho joomla
http://extensions.joomla.org/
(chức năng tương tự nhưng
dùng MooTools không phải
Jquery)
Chia sẻ by tiaxgame - AiChat.Wap.Sh
Online:
Guests: 1
