Thủ thuật LazyLoad load ảnh theo trình tự trong bài viết Blogger

Tốc độ tải trang phụ thuộc rất nhiều vào load ảnh, để cải thiện điều đó, LazyLoad Plugin ưu tiên load nội dung văn bản và chỉ thật sự load ảnh khi nó lọt vào tầm nhìn của người dùng. Thủ thuật blogger này sẽ rất hữu ích với một trang web có nhiều hình ảnh. Lazyload Plugin được phát triển bởi Matt Mlinac và chia sẻ với tất cả và sẽ giúp quá trình thiết kế website của bạn được chuyên nghiệp hơn.
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code sau vào trước thẻ</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/lazyload-min.js" type="text/javascript"></script>

Để sử dụng LazyLoad, chỉ cần dùng một đoạn code be bé bên dưới. Với đoạn code, tất cả những thẻ <img>  đều được áp dụng plugin.

<script type="text/javascript">
$(function() {    
   $("img").lazyload();
});
</script>

Đến đây thì Lazyload đã hoạt động, để smooth hơn chúng ta có thể thêm các tùy chọn bên dưới

Thời gian hiện:

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.

$("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.

Hiệu ứng:
Rất đơn giản, bạn có thể sử dụng tham số effect để khai báo, giá trị fadeIn, slideDown,...

$("img").lazyload({ effect : "fadeIn"});

Ảnh thay thế:

Nó xuất hiện khi ảnh gốc chưa được load xong hoặc gặp lỗi. Khai báo với tham số placeholder và giá trị là url của ảnh.

$("img").lazyload({ placeholder : "img/loading.gif",});

Sự kiện để hiện ảnh:
Mặc định là sự kiện scroll thanh trượt, nhưng chúng ta cũng có thể thay đổi với tham số event

$("img").lazyload({ event : "click" });

Ví dụ:

Tự động lazyload cho tất cả các tag <img>  có class="auto" và những tag cóclass="click" chỉ áp dụng lazyload khi click vào nó.

<script charset="utf-8" type="text/javascript">
$(function(){
  $("img.auto").lazyload({
     placeholder: "img/no-image.jpeg",
     effect: "fadeIn",
     threshold : 0,
  });
  $("img.click").lazyload({
     placeholder: "img/no-image.jpeg",
     effect: "slideDown",
     threshold : 100,
     event : "click"
  });
});
</script>
// Hiển thị list hình
<img class="auto" height="360" src="hình 1.jpg" width="480" />
<img class="auto" height="360" src="hình 2.jpg" width="480" />
<img class="click" height="360" src="hình 3.jpg" width="480" />

Trong đó:
img/no-image.jpeg Thay bằng hình ảnh của bạn ví dụ hình sau
Thay thế hình ảnh 1,2,3 thành hình ảnh bạn muốn. Đoạn code dùng class auto ảnh sẽ tự động load còn class click thì bạn bấm chuột vào hình ảnh mới hiển thị.