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

Điểm 4.6/5 dựa vào 87 đánh giá

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

Loading...

5 nhận xét

  1. @ 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.

    Trả lờiXóa
  2. 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

    Trả lờiXóa
  3. @ 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.

    Trả lờiXóa
  4. 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





    Trả lờiXóa