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. 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ả!
Xem DEMO
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" });Đoạn code 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ị.
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ị.
Nhận xét