Hình ảnh Thời gian giải mã từ công cụ tạo thời gian của Chrome

Question

Tôi đang tạo một trang web di chuyển thị sai (không phải tất cả chúng ta) trong số những thứ khác, cho thấy hình ảnh khi người dùng cuộn.

Tôi đã thực hiện 'tiết lộ' bằng cách đặt hình ảnh ở chế độ nền và đặt một div được tô đầy trên đầu. Sau đó tôi tạo hiệu ứng này div từ 100% chiều cao đến 0% chiều cao dựa trên vị trí cuộn, do đó tiết lộ hình nền.

Tôi đang làm điều này nhiều lần và rất tiếc là tôi đang bị chậm lại.

Sử dụng tính năng Dòng thời gian được tích hợp sẵn của Chrome, tôi có thể thấy rằng hầu hết sự chậm trễ này là từ Giải mã hình ảnh. Đối với các tiết lộ ở trên, nó tái giải mã hình ảnh mỗi khung hình, trong đó mất 22ms cho mỗi hình ảnh cho mỗi khung hình.

Có ai biết khi nào trình duyệt cần thực hiện Giải mã hình ảnh hay không và khi nào thì không? Có vẻ như rõ ràng với tôi rằng nó sẽ cần phải nếu tôi thay đổi kích thước hình ảnh, nhưng không phải là nó sẽ cần phải khi tôi chỉ cần một nửa bao gồm hình ảnh?

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Làm cách nào để tạo hiệu ứng cho thuộc tính? Tôi nghĩ bạn có thể có nhiều lựa chọn thay thế để chỉ làm nổi bật chiều cao (đó là một số loại thay đổi kích thước của vùng chứa).

Có thể ít tốn kém hơn để chỉ 'clip' hình nền với phần tử khác. Tôi tìm thấy một chủ đề về nó trên StackOverflow với một số gợi ý. Nếu bạn sinh động với javascript, không may yếu tố giả là không có lựa chọn ...

Clip/Crop background-image with CSS

Answer 2

tôi đã chiến đấu với vấn đề này rất nhiều cũng có. Như tôi chưa tìm thấy bất cứ điều gì cụ thể và giải pháp đề xuất của tôi dường như không hoạt động trong TẤT CẢ các trường hợp và tôi đã không thể xác định được lý do tại sao.

Dù sao ...

Dường như khi bạn animate một yếu tố rắn trên đầu của một hình ảnh, chrome buộc một recode của hình ảnh.

Có hai điều tôi đã thử và phần lớn họ đã thành công.

1. Nếu bạn thêm -webkit-transform : translate3d(0,0,0) đến các yếu tố bao phủ, bạn nên tìm thấy hầu hết, nếu không phải tất cả các hình ảnh giải mã biến mất.

2. Nếu việc thêm CSS ở trên vào chính phần tử bao phủ không có tác dụng, hãy thử thêm nó vào hình ảnh thay vào đó hoặc thực sự thử thêm nó vào cả hai phần tử.

Hiểu biết của tôi là sử dụng thuộc tính 3d css đẩy hình ảnh vào lớp tổng hợp của nó được lưu trữ và xử lý bởi GPU chứ không phải trình kết xuất phần mềm trình duyệt.

90% thời gian tôi đã tìm thấy một trong các kết hợp ở trên thành công. Tôi hy vọng nó sẽ giúp.