Image - 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.

>>FeedBurner - Thủ thuật tạo FeedBurner cho Blogger

>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 3
>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 2

>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 1 

>>Widget - Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger 
>>Images - Thủ thuật hiệu ứng làm mờ hình ảnh trong bài viết Blogger 
>>Lỗi ảnh - Thủ thuật sửa lỗi ảnh tràn quá khung bài viết Blogger 
>>Slide - Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger

>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger

>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh cho Blogger
>>Navbar - Thủ thuật làm trong suốt thanh Navbar trong Blogger
>>Label / Archive - Thủ thuật hiện tiêu đề trong Label / Archive của BLogger
>>Chữ nhấp nháy - Thủ thuật tạo chữ nhấp nháy trong Blogger

Khi bạn vào trang, bạn trượt xuống thì hình ảnh sẽ lần lượt hiện ra.

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ị.