Addon 2x Lazy Load img - Tải Lazy img cho XenForo 2 2.5.1

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,650
Được Like
10,909
Lazy Load img - Tải Lazy img cho XenForo 2 2.5.1

Cung cấp hỗ trợ hình ảnh lazy loaded qua Lazysizes.

Một phương pháp không truy vấn cho mỗi nhóm người dùng lazy loaded của thẻ img và ATTACH trong chủ đề và các cuộc trò chuyện với khoảng cách điều chỉnh trước khi hình ảnh được tải.

Sử dụng một thẻ noscript xung quanh thẻ img gốc.

Lựa chọn để buộc lazy loading các nội dung trong thẻ spoiler.

Permissions:

Thêm permission:
  • Enable Lazy Load Images
Cho "Forum Permissions" và "Conversation Permissions".

1604583144578.png

  • Bật chạy bên ngoài chủ đề/cuộc trò chuyện
    • cho phép chèn bbcode lazy chạy bên ngoài các ngữ cảnh đó. Bên trong những bối cảnh đó, nó vẫn sẽ tôn trọng các quyền.
  • Buộc các hình ảnh spoiler được tải lazy
    • Bỏ qua quyền và tải lazy hình ảnh trong spoiler
  • Biểu tượng tải lazy
    • Tải lazy hình đại diện người dùng, biểu tượng tài nguyên và biểu tượng dấu chỉ.
      Điều này sử dụng tải lazy gốc của trình duyệt.
  • Sử dụng tải lazy gốc
    • Yêu cầu trình duyệt hiện đại, nếu không sẽ rơi trở lại mã thư viện js
  • Chèn SVG trống cho tệp đính kèm

Khám phá các hiệu ứng
Thêm kiểu dáng vào chủ đề của bạn cho các class: lazyload, lazyloading, lazyloaded. Điều này có thể được thực hiện bởi các class kiểu được cung cấp

Fade in
Fade hình ảnh sau khi tải.

Trong; Lazy loadingLazy loading in progress
CSS:
opacity: 0;

Trong Lazy loading finished thêm;
CSS:
opacity: 1;
transition: opacity 300ms;

Spinner
Làm mờ hình ảnh trong khi tải và hiển thị một con quay làm hình nền (tốt cho tiến trình hình ảnh)

Trong; Lazy loading;
CSS:
opacity: 0;

Trong Lazy loading in progress;
CSS:
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(loader.gif) no-repeat center;

Add-on này không cung cấp hình ảnh "loader.gif"!

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Đính kèm

  • addon-Xon-LazyImageLoader-2.5.1.zip
    37.3 KB · Lượt xem: 11

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom