Lazy là một plugin tải nội dung bị trì hoãn nhanh, nhiều tính năng và nhẹ dành cho jQuery và Zepto. Nó được thiết kế để tăng tốc thời gian tải trang và giảm lưu lượng truy cập cho người dùng của bạn bằng cách chỉ tải nội dung trong chế độ xem. Bạn có thể sử dụng Lazy trong tất cả các cách cuộn dọc và ngang. Nó hỗ trợ hình ảnh trong
0 thẻ và hình nền, được cung cấp cùng với css như
1, theo mặc định. Trên các yếu tố đó, Lazy có thể đặt hình ảnh mặc định hoặc trình giữ chỗ trong khi tải và cũng hỗ trợ hiển thị võng mạc. Nhưng Lazy thậm chí có thể tải bất kỳ nội dung nào khác mà bạn muốn bằng và
khả năng tương thích
Lazy sẽ hoạt động với nhiều loại trình duyệt và hỗ trợ các phiên bản jQuery trong nhiều năm trở lại đây và Zepto là giải pháp thay thế. Bạn có thể chọn bất kỳ phiên bản nào kể từ jQuery 1. 7. 2 hoặc Zepto 1. 1. 6 hoặc cao hơn. Không có cách nào để đảm bảo rằng Lazy sẽ hoạt động với tất cả các trình duyệt, nhưng tất cả những gì tôi đã thử nghiệm đều hoạt động tốt cho đến nay. Nếu bạn tìm thấy bất kỳ vấn đề nào trong các trình duyệt cụ thể, vui lòng cho tôi biết
thử nghiệm trong. IE, Chrome [+ di động], Firefox [+ di động], Safari [+ di động] và Trình duyệt Android
Tài liệu / Ví dụ
Đối với và các thông tin khác, hãy xem trên trang dự án
Cài đặt
Trước hết, bạn sẽ cần một bản sao của jQuery hoặc Zepto để sử dụng Lazy thành công trong dự án của mình. Nếu bạn nhận được cái này, bạn có thể cài đặt Lazy bằng nhiều cách khác nhau. Một số ví dụ dưới đây
CDN
Lười biếng và tất cả các plugin có sẵn trên cdnjs và jsDelivr CDN và có thể được đưa trực tiếp vào mọi trang
Tự lưu trữ
Tải xuống và lưu một trong hai tệp có sẵn để đưa Lazy vào trang của bạn, phiên bản phát triển hoặc phiên bản rút gọn
Trình quản lý gói
Lazy thậm chí có sẵn thông qua NPM và Bower. Chỉ cần sử dụng một trong các lệnh sau đây
$ npm install jquery-lazy
$ bower install jquery-lazy
Sử dụng cơ bản
1. ] Cách sử dụng cơ bản của Lazy khá dễ dàng. Trước hết bạn cần chuẩn bị đầy đủ các yếu tố mà bạn muốn lazy load. Theo mặc định, hãy thêm thuộc tính
2 vào hình ảnh chứa hình ảnh có thể tải và/hoặc thuộc tính
3 cho phần tử phù thủy sẽ sử dụng a hoặc
2. ] Bắt đầu sử dụng Lazy bằng cách gọi nó sau khi tải trang. Bạn không cần phải chỉ định chính xác các phần tử của mình, nhưng để có hiệu suất tốt hơn hoặc các tùy chọn khác, hãy tải các phần tử của bạn trên các lớp duy nhất hoặc bất kỳ bộ chọn nào khác
________số 8
Hãy xem tài liệu để biết Lazy có khả năng gì
Gọi lại / Sự kiện
Lazy đi kèm với một loạt các cuộc gọi lại và sự kiện mà bạn có thể gán cho. Chỉ cần thêm chúng bằng cài đặt khởi tạo
4 - trước khi vật phẩm sắp được tải
5 - sau khi vật phẩm được tải thành công
6 - bất cứ khi nào không thể tải một mục
7 - sau khi tất cả các mục trong ví dụ đã được tải hoặc trả về lỗi
Trường hợp và chức năng công cộng
Lazy hỗ trợ nhiều trường hợp song song. Chỉ cần khởi tạo chúng với các bộ chọn khác nhau. Để truy cập các chức năng công khai của phiên bản, bạn có thể khởi tạo chúng theo cách hướng đối tượng hoặc lấy phiên bản liên kết với mọi phần tử theo mặc định
3
Mọi phiên bản đều có một số chức năng khả dụng công khai để kiểm soát hành vi của nó. Hiện tại có sẵn sáu
4
Trình tải nội dung tùy chỉnh
Với tùy chọn trình tải tùy chỉnh, có một giải pháp mạnh mẽ để tải mọi nội dung theo cách lười biếng. Lazy sẽ xử lý mọi thứ, bạn chỉ cần tạo một phù thủy phương thức tải được kích hoạt bất cứ khi nào phần tử đạt đến ngưỡng hiển thị. Vẫn có thể tải hình ảnh và trình tải tùy chỉnh trong cùng một Phiên bản lười biếng
Để sử dụng điều này, chỉ cần xác định hàm trình tải bên trong quá trình khởi tạo Lazy và chuyển tên trình tải cho thuộc tính
3 của các phần tử phù thủy nên được tải chậm
6
7
Plugin trình tải
Các plugin trình tải có thể mở rộng chức năng của Lazy, như tải các phần tử và dữ liệu khác. Về cơ bản, nó giống như , với điểm khác biệt là các plugin có thể mở rộng vĩnh viễn tất cả các phiên bản tiếp theo trên toàn cầu và cho phép chúng xử lý các phần tử cụ thể như
9 theo mặc định mà không cần đặt thuộc tính
3. Với trình tải nội dung tùy chỉnh, bạn phải khởi tạo từng phiên bản khi thiết lập với trình tải. Với các plugin, bạn chỉ cần tải tệp plugin và bạn đã hoàn tất mọi phiên bản kể từ bây giờ
Để biết thêm thông tin và ví dụ, hãy xem các plugin hiện có hoặc readme. md trong đó
Thông số cấu hình
Các cấu hình sau đây có sẵn theo mặc định
NameTypeDefaultDescriptionnamestring'lazy'Tên nội bộ, được sử dụng cho không gian tên và liên kết. chainablebooleantrueTheo mặc định, Lazy có thể kết nối được và sẽ trả về tất cả các phần tử. Nếu được đặt thành1 Lazy sẽ tự trả lại phiên bản plugin đã tạo để sử dụng tiếp. autoDestroybooleantrueSẽ tự động hủy cá thể khi không còn phần tử nào để xử lý. bindstring'load'If set to$ npm install jquery-lazy
$ bower install jquery-lazy
2' Lazy bắt đầu làm việc trực tiếp sau khi tải trang. Nếu bạn muốn sử dụng Lazy cho các sự kiện của riêng mình, hãy đặt nó thành$ npm install jquery-lazy
$ bower install jquery-lazy
3'. ngưỡnginteger500Số lượng pixel bên dưới chế độ xem, trong đó tất cả hình ảnh được tải trước khi người dùng nhìn thấy chúng. visibleOnlybooleanfalseXác định nếu chỉ các phần tử hiển thị được tải. appendScrolintegerwindowMột phần tử để lắng nghe các sự kiện cuộn, hữu ích khi hình ảnh được lưu trữ trong vùng chứa. scrollDirectionstring'both'Xác định hướng cuộn của tay cầm. Các giá trị có thể là$ npm install jquery-lazy
$ bower install jquery-lazy
4,$ npm install jquery-lazy
$ bower install jquery-lazy
5 và$ npm install jquery-lazy
$ bower install jquery-lazy
6. imageBasestringnullNếu được xác định, điều này sẽ được sử dụng làm đường dẫn cơ sở cho tất cả các hình ảnh được tải bởi phiên bản này. defaultImagestringblank imageBase64 chuỗi hình ảnh, được đặt làm nguồn hình ảnh mặc định cho mọi hình ảnh không có thuộc tính nguồn được xác định trước. chuỗi hình ảnh placeholderstringnullBase64, đặt nền trên mọi phần tử khi tải trình giữ chỗ. số nguyên trễ-1 Nếu bạn muốn tải tất cả các phần tử cùng một lúc sau khi tải trang, thì bạn có thể chỉ định thời gian trễ tính bằng mili giây. kết hợpbooleanfalseVới tham số này, Lazy sẽ kết hợp tải phần tử theo sự kiện và phần tử bị trì hoãn. thuộc tínhattributestring'data-src'Name của thẻ hình ảnh thuộc tính$ npm install jquery-lazy
$ bower install jquery-lazy
7, nơi lưu trữ đường dẫn hình ảnh. srcsetAttributestring'data-srcset'Tên của thuộc tính$ npm install jquery-lazy
$ bower install jquery-lazy
8 thẻ hình ảnh, nơi lưu trữ bộ nguồn. sizeAttributestring'data-sizes'Name của thẻ hình ảnh thuộc tính$ npm install jquery-lazy
$ bower install jquery-lazy
9, nơi lưu trữ định nghĩa kích thước cho bộ nguồn. retinaAttributestring'data-retina'Name của thuộc tính thẻ hình ảnh, nơi lưu trữ đường dẫn cho hình ảnh võng mạc tùy chọn. loaderAttributestring'data-loader'Name hoặc thuộc tính phần tử, trong đó mã định danh của plugin hoặc trình tải khách hàng bị xáo trộn. imageBaseAttributestring data-imagebase Đặt tên cho thành phần thẻ hình ảnh, nơi lưu trữ cơ sở hình ảnh cụ thể. Điều này sẽ ghi đè lên cấu hình$ npm install jquery-lazy
$ bower install jquery-lazy
0 toàn cầu. removeAttributebooleantrueXác định xem có nên xóa thuộc tính khỏi phần tử sau khi tải không. handleNamestring'handled'Name của thuộc tính dữ liệu thẻ phần tử, để xác định xem phần tử đã được xử lý chưa. loadingNamestring'loaded'Name của thuộc tính dữ liệu thẻ phần tử, để xác định xem phần tử đã được tải chưa. effecteffectstring'show'Tên chức năng của hiệu ứng bạn muốn sử dụng để hiển thị hình ảnh đã tải, chẳng hạn như
1 hoặc
2. effectTimeinteger0Time tính bằng mili giây mà hiệu ứng sẽ sử dụng để xem hình ảnh. ThrottleenableThrottlebooleantrueGiảm tốc các cuộc gọi đang tải khi cuộn sự kiện. throttleinteger250Thời gian tính bằng mili giây mà van tiết lưu sẽ sử dụng để giới hạn các cuộc gọi tải. callbacks BeforeLoadfunctionundefinedCallback, hàm này sẽ được gọi trước khi phần tử được tải. Có phần tử hiện tại và chức năng phản hồi làm tham số.
3 là phiên bản Lazy hiện tại. Hàm afterLoadfunctionundefinedCallback, sẽ được gọi sau khi phần tử được tải. Có phần tử hiện tại và chức năng phản hồi làm tham số.
3 là phiên bản Lazy hiện tại. onErrorfunctionundefinedCallback, sẽ được gọi nếu không thể tải phần tử. Có phần tử hiện tại và chức năng phản hồi làm tham số.
3 là phiên bản Lazy hiện tại. onFinishedAllfunctionundefinedCallback, hàm này sẽ được gọi sau khi tất cả các phần tử được tải hoặc trả về lỗi. Cuộc gọi lại không có tham số.
3 là phiên bản Lazy hiện tại
Xây dựng và xác thực
Dự án này bao gồm một tập lệnh xây dựng tự động bằng cách sử dụng
7. Để xây dựng các phiên bản Lazy của riêng bạn, trước tiên bạn cần thông qua npm. Sau đó, bạn có thể sử dụng lệnh sau trong bảng điều khiển của mình để tự động tạo tất cả các tệp hiệu quả. Trong khi xây dựng các tệp này, mọi thứ cũng sẽ được kiểm tra tính hợp lệ bằng
8