Trang Chủ   Vn+ TiVi   Fanpage Twitter  Fanpage FaceBook
Loading
                                         

Bản Tin Câu Lạc Bộ Pa Tin Im-Pod                                                                          
Diễn đàn Vn+
Tiêu Điểm

Tình Yêu - Giới Tính

1001 Bí Ẩn

Tổng hợp phần mềm

Ebook

Thủ Thuật IT

Thủ Thuật Blog

Video Clip

Lạ & Fun


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

El Kun

El Kun
Super Moderator
Super Moderator
Tên của Plugin này là jquery image lazy-loading
Thực ra biết tới cái plugin cũng lâu lâu rồi, nhưng nay mới có dịp tìm hiểu nó một chút.
Để xem plugin này của jquery làm được những gì, mời bạn ghé qua thăm một tạp chí khá nổi tiếng về IT đó là : [You must be registered and logged in to see this link.]

Tôi không biết trang web này họ sử dụng thư viện gì hay họ tự phát triển, nhưng plugin này làm được tương tự như trang web trên.

Hãy để ý những bức ảnh khi bạn kéo thành scrollbar nhé, khi ảnh xuất hiện thì cũng có nghĩa là nó bắt đầu load, như vậy tạo ra một hiệu hứng khá hay và đẹp mắt, image được load từng đoạn một nên cũng có nghĩa là giảm tải được cho server và tốc độ load trang web của bạn về mặt nào đó cũng được cải thiện.

Để sử dụng plugin này cũng tương tự như những plugin khác, bạn copy đoạn code sau và đặt trong thẻ header trang web của bạn.

Code:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script> <script src=”duong_dan_toi_file/jquery.lazyload.js” type=”text/javascript”></script>

File thư viện jquery nếu trang web của bạn đã có sẵn rồi thì không cần thiết nữa
plugin jquery lazyload thì bạn có thể download tại [You must be registered and logged in to see this link.]

Kế tiếp bạn thêm đoạn mã sau để có thể sử dụng plugin này

Code:
$(function(){$(“img”).lazyload();})

Như vậy có nghĩa là tât cả các images trong trang web của bạn đều được “lazyload”, nếu một lý do nào đó mà bạn chỉ muốn sử dụng cho một phần trang web ví dụ như chỉ phần nội dung trang web giả sử có id=”content” chẳng hạn, bạn thay đoạn mã trên bằng đoạn mã như dưới đây

Code:
$(“#content img”).lazyload();

Trên đây là sử dụng jquery lazy load với cấu hình mặc định. Bạn cũng có thể tùy biến một số chức năng như sau:

Thiết lập độ nhạy:
Mặc định load 200 điểm ảnh trước
thay

Code:
    $(“img”).lazyload();

    Bằng

    $(“img”).lazyload({ threshold : 200 });

Thiết lập hình ảnh giữ chỗ và sự kiện tùy chỉnh để kích hoạt tải:

Code:
$(“img”).lazyload({ placeholder : ”img/grey.gif” });

Nếu không đặt tùy chọn này, mặc định một ảnh có kích thước 1×1 pixel màu trắng được sẽ sử dụng

Đặt sự kiện khi ảnh được load:

Code:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
event : ”click”
});

Trên đây là sự kiện click, bạn cũng có thể đặt sự kiện là hover hay sự kiện khác theo ý bạn.

Đặt hiệu ứng:

Code:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
effect : ”fadeIn”
});

Trên đây chúng ta sử dụng hiệu ứng faceIn, Bạn cũng có thể sử dụng hiệu ứng khác như slideUp, slideDown….

Đặt đường bao cho các ảnh:

Code:
$(“img”).lazyload({
placeholder : ”img/grey.gif”,
container: $(“#container”)
});

Đặt đường bao cho các ảnh khi được load, ở đây sử dụng thẻ có ID là “container“. Điều này tương tự như thanh scroll của web site khi một trang web quá dài. Nhưng ở đây chúng ta áp dụng cho ảnh khi ảnh quá nhiều

vinasupport

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 

Legend :  [ Vn-plus Founder ] [ Administrator ] [ Super Moderator ] [ Moderator ] [ Member ] [ VIP member ] [ banned ]



Free Auto Backlink Exchange ServiceFree Backlink Exchange For SeoVietnam BacklinksTravel BacklinksFree BacklinksText Backlink ExchangesText Back Link ExchangeFlorists LinksOverShopping Link ExchangeFree Automatic LinkWeb Link Exchange - Linkcsere

    Diễn Đàn Vn-Plus.Org | Thống kê | Liên hệ | Báo cáo lạm dụng  | Bạn muốn quảng cáo | Lên Đầu Trang

    Powered by: PHPBB2. Copyright © 2011  Diễn Đàn Mở VN+
    Contact: Vn-plus Founder . Yahoo: Nobita_xuka_ccy. Địa chỉ: Từ Tây - Yên Phú - Yên Mỹ - Hưng Yên
    BQT không chịu trách nhiệm bất cứ nội dung nào của thành viên đăng tải

Liên Kết Vớivn+

Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất