Traidatmui.com – Bài viết hôm nay mình xin chia sẻ cùng các bạn một thủ thuật có thể phần nào làm tăng tốc độ load trang blog của bạn. Với Lazy Load thì những hình ảnh trên blog của bạn mà không nhìn thấy thì sẽ không được load hay load về sau khi nội dung đã tải xong. Nếu trên blog của bạn có quá nhiều hình ảnh thì đây là thủ thuật hữu ích cho bạn, cách thức hoạt động của lazy load là những hình ảnh bạn nhìn thấy được trên trình duyệt và nội dung sẽ load trước và khi bạn cuộn chuột xuống tới hình ảnh nào bị khuất trên màn hình thì những hình ảnh đó lần lượt được tải về, tương tự như ở trang vietnamnet.vn. Điều này tăng tốc độ load của blog nhanh hơn vì không phải load một lần tất cả các hình ảnh trên blog của bạn. Có thể nói bạn sẽ khó hình dung được tác dụng của Lazy Load, bạn có thể xem demo bên dưới sẽ rỏ hơn, bạn hãy để ý cách load của các hình ảnh trong demo.» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
/* ]]> */
</script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
/* ]]> */
</script>
Như vậy là xong, tuy nhiên bạn vẫn cần tìm hiểu một số tùy chỉnh bên dưới để tùy biến cho phù hợp với blog của mình.
A. Chọn vùng sử dụng Lazy Load
Theo mặc định ở trên thì tất cả các ảnh trên blog sẽ được lazyload, bây giờ bạn muốn chỉ một phần nào đó trên blog của mình sử dụng Lazy Load. Ví dụ nếu bạn chỉ muốn Lazy Load cho phần bài viết (Post) thì bạn thay code mau đỏ trên thành bên dưới
$(".post img").lazyload({
effect : "fadeIn"
});
effect : "fadeIn"
});
B. Thêm sự kiện
Mặc định là khi bạn cuộn chuột xuống tới ảnh nào thì nó sẽ được tải về và hiển thị ra, bạn cũng có thể thay đổi sự kiện cho nó với event.
$("img").lazyload({
effect : "fadeIn",
event : "click"
});
effect : "fadeIn",
event : "click"
});
- Sự kiện click: khi bạn click vào ảnh thì nó mới load về
- Sự kiện mouseover: khi bạn rê chuột vào ảnh nó sẽ tải về
C. Số pixel ảnh load
Mặc định thì khi bạn thấy được hình ảnh nó sẽ hiện ra ngay, bạn có thể tùy chỉnh lại với tham số threshold.
$("img").lazyload({
effect : "fadeIn",
threshold : 100
});
effect : "fadeIn",
threshold : 100
});
threshold : 100 tương đương với ảnh sẽ được hiện khi nó load được 100 pixel, bạn có thể thay đổi thành số tùy ý.
D. Ảnh thay thế khi chưa load ảnh
Mặc định thì khi ảnh chưa được tải về nó sẽ hiện khung trống, bạn có thể dùng một hình ảnh để thay thế trong lúc chờ ảnh tải về hoặc không thể tải về với tham số placeholder.
$("img").lazyload({
effect : "fadeIn",
placeholder : "link ảnh"
});
effect : "fadeIn",
placeholder : "link ảnh"
});
Chúc bạn thành công
Tham khảo appelsiini.net
0 nhận xét:
Đăng nhận xét