"Thủ thuật tạo Lazy Load cho hình ảnh trên Blogspot"

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>

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"
});

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"
});

- 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
});

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"
});


Chúc bạn thành công

Tham khảo appelsiini.net

Xem khác cùng chủ đề

5 nhận xét | Viết lời bình

3/08/2012 10:05:00 SA Trả lời

file js hỏng mất rồi

Admin
3/08/2012 08:28:00 CH Trả lời

@ Thang Phan: Không biết Google code trên tài khoản bị sao mà k vào được, mình sẽ tranh thủ sớm khắc phục lại các file js.

3/20/2012 10:07:00 SA Trả lời

Thủ thuật hay lắm mình cũng làm trang tin tức nên áp dụng nhìn sẽ rất chuyên nghiệp, nhưng mình áp dụng thì thấy kiểu như nó load 2 lần thì phải
load lần 1 thì ra đầy đủ xong chờ lúc ảnh lại mất rồi mới đến chế độ lazyloaf idontknow
không biết mình có làm sai gì ko nữa

Admin
3/22/2012 05:53:00 CH Trả lời

@ Bmaster:Nếu bạn làm như trên thì ok rồi bạn, nếu trong template bạn đã có Jquery thì không cần thêm file Jquery ở trên.

7/24/2015 02:16:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang