Hướng dẫn sử dụng lazy load của jquery

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Hướng dẫn sử dụng lazy load của jquery Empty Hướng dẫn sử dụng lazy load của jquery

Bài gửi by xuanha 25/1/2015, 18:47

joomla lazyload images xin giới thiệu cách sử dụng plugin lazyload của jQuery
Định nghĩa
Lazy Load nhằm làm trễ việc load ảnh trong trang web. Ảnh nằm bên ngoài khung hình sẽ không load lên cho đến khi người dùng cuộn trang web tới nó. Sử dụng Lazy Load ở những trang web dài với nhiều hình ảnh sẻ giúp trang được tải nhanh hơn, trong một số trường hợp còn giúp giảm tải cho máy chủ web.
Hướng dẫn sử dụng lazy load của jquery Lazy-load-image
Cách sử dụng:
Trước tiên, bạn cần download jQuery tại trang jquery.com và plugin Lazy Load tại plugins.jquery.com/lazyload/
Sau đó thêm các thư viện bên trong thẻ <head> như sau:
[html]
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

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

[/html]
Khi muốn 1 ảnh nào đó sử dụng lazyload, ta nên viết theo cú pháp sau:
[html]
<img class="lazy" data-original="images/example.jpg"/>

[/html]
ta dùng chung một class cho tất các ảnh dùng lazyload( ở đây tôi dùng class=”lazy”) để ta có thể dễ dàng điều chỉnh các ảnh.
lệnh jQuery như sau:
[html]
$(function(){

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

});

[/html]
Cài đặt Threshold
Mặc định khi ảnh được load, chúng sẽ hiển thị trên màn hình, nếu muốn ảnh được load sớm hơn, ta dùng thông số threshold, ví dụ cho giá trị threshold là 200, ảnh sẽ load 200pixels trước khi nó hiển thị trên khung hình
[html]
$(function(){
$("img.lazy").lazyload({
threshold: 200;
});
});

[/html]
Bạn có thể sử dụng sự kiện của jQuery như click hoặc mouseover, ví dụ: mặc định nó sẽ đợi đến khi người dùng cuộn xuống mới hiển thị trên khung hình, để load ảnh chỉ khi người dùng click vào chúng, ta có thể dùng:
[html]
$("img.lazy").lazyload({
event : "click"
});

[/html]
Mặc định plugin sẽ đợi đến khi ảnh load hết và gọi hàm show(), chúng ta cũng có thể chọn hiệu ứng ta muốn, như ví dụ này tôi dùng hiệu ứng fadeIn
[html]
$("img.lazy").lazyload({
effect : "fadeIn"
});

[/html]
Ta cũng có thể sử dụng plugin cho việc cuộn một container, ví dụ thẻ div với thanh cuộn
[html]
#contain {
height: 600px;
overflow: scroll;
}

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

[/html]
Có 1 điều hạn chế là khi dùng lazyload images sẽ không tốt cho SEO, joomla seo offpage sẽ hướng dẫn các bạn cách khắc phục, vừa sử dụng lazyload image, vừa không ảnh hưởng đến SEO ở bài sau. như vậy ta sẽ không ảnh hưởng đến việc quick search modules, article của google

_________________
joomla module manager, responsive joomla templates, joomla article masonry
avatar
xuanha
Cấp 1
Cấp 1

Bài gửi : 23
Điểm : 3646
Like : 0
Tham gia : 28/12/2014

http://beautiful-templates.com/evo/avatar-tool-manage-joomla-eas

Về Đầu Trang Go down

Hướng dẫn sử dụng lazy load của jquery Empty Re: Hướng dẫn sử dụng lazy load của jquery

Bài gửi by vanthai 25/1/2015, 18:48

Lazy load này rt hay, vi nhng trang dài mà có nhiu hình nh, bn s thy được s khác bit như thế nào v tc đ load ca trang so vi không dùng lazyload. Tt nht là vi trang nào bn cũng nên dùng, vì nó khá là đơn gin

_________________
joomla article slider,  joomla minify html, joomla mobile template
avatar
vanthai
Cấp 1
Cấp 1

Bài gửi : 20
Điểm : 3631
Like : 0
Tham gia : 03/01/2015

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

Permissions in this forum:
Bạn không có quyền trả lời bài viết