LazyLoad Plugin for Blogger/ BlogspotTố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. Nó 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ả!
#bl2 Để hình dung tốt hơn về công dụng, các bạn nên xem qua demo LazyLoad Plugin #bllink
#bl0 Let's get started!!
#bl2 Lazyload là plugin của Jquery, do đó nhất dịnh bạn sẽ phải cần thư viện Jquery. Sau đây là thư viện jQuery và LazyLoad, hãy thêm vào giữa cặp thẻ <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>#bl2 Để 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 src="http://salipropham-blogspot-com.googlecode.com/files/lazyload-min.js" type="text/javascript"></script>
<script type="text/javascript">Đế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
$(function() {
$("img").lazyload();
});
</script>
#bl1 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.#bl1 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"});
#bl1 Ả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",});
#bl1 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" });
#bl0 Đoạn code ví dụ
Tự động lazyload cho tất cả các tag <img> có class="auto" và những tag <img> 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="h1.jpg" width="480" />
<img class="auto" height="360" src="h2.jpg" width="480" />
<img class="click" height="360" src="h3.jpg" width="480" />
Chúc thành công!
Cảm ơn bạn=D=D=D=D=D=D=D=D=D
ReplyDelete