JavaScript lấy kích thước hình ảnh mà không cần tải
|
Barry Pollard là một nhà phát triển web bị ám ảnh bởi hiệu suất web. Anh ấy là tác giả của cuốn sách Manning “HTTP/2 In Action” và là một trong những người duy trì … Thông tin thêm về Barry ↬ Show
Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Những người ủng hộ hiệu suất web thường khuyên nên thêm kích thước cho hình ảnh của bạn để có hiệu suất tốt nhất nhằm cho phép trang được bố trí với không gian thích hợp cho hình ảnh, trước khi chính hình ảnh đó được tải xuống. Điều này giúp tránh thay đổi bố cục khi hình ảnh được tải xuống — điều mà Chrome gần đây đã bắt đầu đo lường trong chỉ số Chuyển đổi bố cục tích lũy mới Chà, một bí mật nhỏ, bẩn thỉu — không nổi tiếng bên ngoài những người ủng hộ hiệu suất web cốt lõi — đó là, cho đến gần đây, điều này thực sự không tạo ra sự khác biệt trong nhiều trường hợp, như chúng ta sẽ thấy bên dưới. Tuy nhiên, việc thêm các thuộc tính đề xuất đọcThuộc tính CSS Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Gặp gỡ Thiết kế Cảm ứng cho Giao diện Di động, hướng dẫn hoàn toàn mới của Steven Hoober về thiết kế cho thiết bị di động với các nguyên tắc lấy con người làm trung tâm, đã được kiểm chứng. 400 trang, chứa đầy nghiên cứu chuyên sâu về người dùng và các phương pháp hay nhất Chuyển đến mục lục ↬ Tại sao thêm chiều rộng và chiều cao là lời khuyên tốtLấy ví dụ trang đơn giản này Quá trình này có thể hiển thị theo hai giai đoạn, đầu tiên là khi HTML được tải xuống và sau đó là giai đoạn thứ hai sau khi hình ảnh được tải xuống. Với đoạn mã trên, điều này sẽ khiến nội dung chính nhảy xuống sau khi hình ảnh được tải xuống và không gian cần thiết để hiển thị có thể được tính toán Sự thay đổi bố cục rất gây khó chịu cho người dùng, đặc biệt nếu bạn đã bắt đầu đọc bài báo và đột nhiên bạn bị chuyển hướng và bạn phải tìm lại vị trí của mình. Điều này cũng đặt thêm công việc cho trình duyệt để tính toán lại bố cục trang khi mỗi hình ảnh xuất hiện trên internet. Trên một trang phức tạp có nhiều hình ảnh, điều này có thể gây tải trọng đáng kể cho thiết bị vào thời điểm mà thiết bị có thể có nhiều thứ tốt hơn để xử lý Cách truyền thống để tránh điều này là cung cấp các thuộc tính Sau đó, quá trình kết xuất diễn ra như bên dưới, trong đó lượng không gian thích hợp được dành riêng cho hình ảnh khi hình ảnh xuất hiện và không có sự dịch chuyển chói tai của văn bản khi hình ảnh được tải xuống Thậm chí bỏ qua tác động gây phiền nhiễu cho người dùng trong nội dung nhảy xung quanh (điều mà bạn không nên. ), tác động lên CPU cũng có thể khá lớn. Ảnh chụp màn hình bên dưới hiển thị các phép tính hiệu suất do Chrome thực hiện trên trang web tôi làm việc trên đó có thư viện khoảng 100 hình ảnh. Phía bên trái hiển thị các phép tính khi cung cấp Như bạn có thể thấy, tác động là đáng kể — đặc biệt là trên các thiết bị cấp thấp hơn và tốc độ mạng chậm, nơi hình ảnh xuất hiện riêng biệt. Điều này làm tăng thời gian tải lên một lượng đáng chú ý Cách CSS tương tác với chiều rộng và chiều cao của phần tửChiều rộng và chiều cao trên hình ảnh có thể gây ra sự cố khi bạn cố gắng thay đổi chúng bằng CSS. Ví dụ: nếu bạn muốn giới hạn hình ảnh của mình ở một độ rộng nhất định, bạn có thể sử dụng CSS sau Điều này sẽ ghi đè Điều này thực sự rất dễ khắc phục bằng cách thêm một dòng Tuy nhiên, tôi thấy nó vẫn khiến mọi người ngạc nhiên và đôi khi dẫn đến việc họ không chỉ định kích thước hình ảnh trong HTML thay vào đó. Không có kích thước hình ảnh, bạn có thể thoát khỏi việc chỉ cần chỉ định Vì vậy, một khi chúng ta thêm các kích thước và thủ thuật Ví dụ: lấy mã dưới đây Điều này sẽ dẫn đến tải này Đợi đã, chuyện gì đang xảy ra ở đây vậy? . Tôi nghĩ rằng tôi đã nói rằng bằng cách chỉ định kích thước hình ảnh trong HTML, bạn có thể tránh được sự cố thay đổi bố cục này? Vấn đề là, trừ khi bạn đưa ra các giá trị CSS Hàm ý của tất cả điều này là việc chỉ định các thuộc tính Điều này ảnh hưởng đến bất kỳ trang nào mà chúng tôi hạn chế kích thước hình ảnh theo cách phản hồi — tôi. e. thiết bị di động màn hình nhỏ. Đây có thể là những người dùng đang gặp khó khăn với các hạn chế về mạng và sức mạnh xử lý hạn chế sẽ bị ảnh hưởng nhiều nhất khi thay đổi bố cục. Tất nhiên, lý tưởng nhất là chúng tôi nên phân phối hình ảnh có kích thước phù hợp với kích thước màn hình, nhưng bạn không thể bao gồm mọi kích thước thiết bị, vì vậy, hình ảnh thường sẽ cần trình duyệt thay đổi kích thước, đặc biệt là trên thiết bị di động Nhiều trang web có thể không bận tâm chỉ định Làm việc xung quanh vấn đềCác hạn chế đối với hình ảnh phản hồi đã được biết đến từ lâu và nhiều giải pháp thay thế, bao gồm cái gọi là tấn công đệm đáy, đã được tạo ra để khắc phục sự cố. Điều này sử dụng thực tế là tỷ lệ phần trăm Ba nhược điểm chính của kỹ thuật này là như sau
Và, thành thật mà nói - đó là một chút rắc rối. Vì vậy, chúng ta thực sự nên sửa lỗi này đúng cách, phải không? Khắc phục sự cố thay đổi kích thướcVấn đề đã được giải quyết từ một số hướng khác nhau bởi một số tổ chức tiêu chuẩn khác nhau Nhóm làm việc CSS (CSS WG) đã đề xuất thuộc tính Đẹp hơn nhiều. Điều này đặc biệt hữu ích cho video mà chúng tôi thường có một số tỷ lệ khung hình thường được sử dụng, vì vậy chúng tôi có thể tạo một vài lớp như trên cho mỗi kích thước. Nó có lẽ ít hữu ích hơn đối với những hình ảnh có kích thước ít được chuẩn hóa hơn nhiều, vì nó không giải quyết được vấn đề 1 (yêu cầu mã CSS tùy chỉnh cho mỗi hình ảnh), cũng như vấn đề 3 (nhà phát triển trang web sẽ cần nhớ đặt vấn đề này). Vì vậy, đó là một bước tiến, nhưng không phải là một giải pháp đầy đủ Ngoài vấn đề này, Nhóm Cộng đồng Vườn ươm Web (WICG) — một nhóm các nhà phát triển trình duyệt và các bên quan tâm khác có thể thử nghiệm các công nghệ để xem liệu chúng có hoạt động trước khi chuẩn hóa chính thức hay không — cũng đã tạo một đề xuất để khắc phục điều này. Họ đã đề xuất thuộc tính Vì đây là một thuộc tính HTML, nó có thể được đặt cho mỗi hình ảnh (giải quyết vấn đề 1) và tương đối dễ viết mã (giải quyết vấn đề 2), nhưng vẫn có khả năng gặp phải các vấn đề về áp dụng (vấn đề 3) trừ khi nó trở nên rất tốt- Chúng tôi đã có một phương pháp phổ biến, nổi tiếng để thiết lập các phần tử Jen Simmons đã đề xuất giải pháp đơn giản và tao nhã này mà cô ấy đã nghĩ ra, cùng với fantasai Thay vì mã hóa cứng Nếu Về cơ bản, giải pháp này có nghĩa là nếu bốn điều kiện sau là đúng, thì kích thước hình ảnh chính xác có thể được tính toán mà không cần đợi hình ảnh tải xuống và do đó không cần thay đổi bố cục nội dung
Nếu bất kỳ một trong số này không được đặt, thì phép tính sẽ không thể thực hiện được và do đó sẽ thất bại và bị bỏ qua và phải đợi hình ảnh được tải xuống Vì vậy, khi các trình duyệt hỗ trợ sử dụng HTML Thúc đẩy việc áp dụng giải pháp nàyBởi vì đây chỉ là một thuộc tính CSS, nên đề xuất có một bước ngoặt nữa — nó có thể được thêm vào biểu định kiểu tác nhân người dùng được sử dụng bởi các trình duyệt, do đó, thậm chí sẽ không yêu cầu bất kỳ thay đổi nào từ các nhà phát triển web để hưởng lợi từ điều này Biểu định kiểu tác nhân người dùng là nơi đặt các định nghĩa CSS mặc định (e. g. phần tử Tuy nhiên, điều này phụ thuộc vào hàm Firefox đã đi trước và thực hiện điều này như một thử nghiệm và sau đó bật nó theo mặc định cho Firefox 71. Khi đã được phát hành, thì trang web của bạn có thể sẽ nhanh hơn miễn phí — cảm ơn Mozilla. Có thể trong tương lai, họ sẽ chuyển phương thức này sang phương thức biểu định kiểu tác nhân người dùng, nhưng hiện tại, điều này là đủ (và có lẽ hiệu quả hơn?) Khả năng tương thích ngượcKhi giới thiệu một thay đổi trong hành vi, luôn có mối lo ngại về khả năng tương thích ngược và tính năng này cũng không khác. Về lý thuyết, miễn là bốn thuộc tính được thiết lập phù hợp, sẽ không có sự cố với điều này Tuy nhiên, khi Firefox thử nghiệm lần đầu với nó, họ đã phát hiện ra sự cố đối với những người đặt sai Tuy nhiên, giải pháp cho vấn đề đó tương đối đơn giản. có tỷ lệ khung hình hình ảnh thực tế của hình ảnh sẽ ghi đè lên bất kỳ tỷ lệ khung hình tính CSS nào. Bằng cách này, tỷ lệ khung hình được tính toán (không chính xác) có thể được sử dụng cho bố cục ban đầu, nhưng sau đó có thể được tính toán lại khi hình ảnh được tải xuống, vì vậy hình ảnh được hiển thị như trước đây. Điều này gây ra sự thay đổi bố cục (do không gian được phân bổ không chính xác ban đầu) nhưng điều đó đã xảy ra trước đó, vì vậy nó không tệ hơn. Trên thực tế, nó thường tốt hơn rất nhiều vì tỷ lệ khung hình không chính xác thường sẽ gần với sự thật hơn là tỷ lệ khung hình bằng 0 Triển khai cho các trình duyệt khácSau khi thử nghiệm thành công của Firefox, Chrome cũng đã quyết định triển khai điều này (hiện tại một lần nữa sử dụng phương thức được mã hóa bố cục thay vì biểu định kiểu tác nhân người dùng mặc định) và triển khai nó theo mặc định trong Chrome 79. Điều này cũng quan tâm đến các trình duyệt dựa trên crom khác (ví dụ: Edge, Opera và Brave). Gần đây hơn, vào tháng 1 năm 2020, Apple đã thêm nó vào phiên bản Tech Preview của Safari, nghĩa là hy vọng nó sẽ sớm xuất hiện trên phiên bản sản xuất của Safari và cùng với đó, trình duyệt chính cuối cùng sẽ triển khai tính năng này và web sẽ Hạn chếCó một số hạn chế cần lưu ý với tính năng này, bao gồm các sự cố với
Chỉ đạo nghệ thuậtBản sửa lỗi hoạt động rất tốt để tính tỷ lệ khung hình dựa trên Trong trường hợp này, chúng tôi đang sử dụng hình ảnh rộng cho máy tính để bàn và sau đó là hình vuông, được cắt cho thiết bị di động. Hình ảnh đáp ứng có thể được triển khai với phần tử Hiện tại, điều này chỉ cho phép đặt Cập nhật (tháng 7 năm 2021). Điều này đã được thêm vào trong Chrome 90 tải chậmTính năng này sẽ hoàn toàn phù hợp để sử dụng với lazy-loading. Lý tưởng nhất là tất cả hình ảnh tải chậm được tải ngoài màn hình khi bạn cuộn xuống trang trước khi hình ảnh tải chậm đi vào chế độ xem, nhưng thường thì trường hợp này không xảy ra tùy thuộc vào tốc độ cuộn của người dùng và mạng, vì vậy có hình ảnh . Ngoài ra, ngay cả khi quá trình tải đang diễn ra ngoài màn hình, việc thay đổi bố cục có thể gây tốn kém về thời gian của CPU, như chúng tôi đã trình bày ở trên Tuy nhiên, các kỹ thuật lazy loading có thể liên quan đến việc không sử dụng phần tử Tải chậm gốc đã được nhóm Chrome phát hành gần đây và kể từ đó, nó đã được thêm vào thông số HTML. Các trình duyệt khác cũng đang tìm cách hỗ trợ điều này với Firefox cũng sẽ sớm nhận được điều này và Safari hy vọng sẽ không quá muộn. Điều đó sử dụng phần tử Hoàn hảo. Thật không may, tôi phát hiện ra giải pháp chiều cao và chiều rộng này không tương thích với chức năng lazy-load gốc được phát hành gần đây như có thể thấy trên trang thử nghiệm này. Tôi đã nêu một lỗi về sự cố này và hy vọng nhóm Chrome sẽ sớm khắc phục sự cố này. (Cập nhật. Điều này đã được sửa trong Chrome 83. ) Không phải hình ảnhHiện tại, các trình duyệt đã triển khai điều này, mới chỉ thực hiện đối với phần tử Cập nhật (Tháng 10. 2021). Hỗ trợ CSS Phần kết luậnTôi thích những cải tiến chỉ hoạt động mà không cần bất kỳ nỗ lực nào của chủ sở hữu trang web. Tất nhiên, điều đó không phải là bỏ qua công việc khó khăn mà các nhà phát triển trình duyệt và nhóm tiêu chuẩn hóa yêu cầu, nhưng nó thường được triển khai cho các trang web mới là khó khăn thực sự. Chúng ta có thể thêm ít ma sát hơn để giới thiệu những cải tiến này, thì càng có nhiều khả năng chúng sẽ được áp dụng và không có ma sát nào tốt hơn là không có gì cả. Khắc phục tác động của việc thay đổi bố cục đối với hình ảnh phản hồi của người dùng dường như là một trong những cải tiến như vậy và web sẽ tốt hơn cho điều đó Một thay đổi bắt buộc đối với các nhà phát triển web của chúng tôi là đảm bảo rằng chúng tôi đang cung cấp các thuộc tính Làm cách nào để lấy kích thước của hình ảnh trong JavaScript?Bạn có thể lấy chiều rộng và chiều cao ban đầu của hình ảnh bằng cách sử dụng các thuộc tính naturalWidth và naturalHeight của hình ảnh HTML5, được hỗ trợ trong hầu hết các trình duyệt chính. Để có được chiều rộng và chiều cao hiện tại, bạn có thể sử dụng các thuộc tính clientWidth và clientHeight của JavaScript .
Làm cách nào để có được chiều rộng và chiều cao của JavaScript hình ảnh base64?var i = new Image(); . src = imageData; . "+ tôi. chiều rộng+" chiều cao. " + tôi. chiều cao );
Cách lấy chiều rộng và chiều cao của hình ảnh bằng jQuery?var imageWidth = $(Imgsize). width(); alert(imageWidth); var imageHeight = Imgsize.
Làm cách nào để lấy kích thước hình ảnh trong nút js?Node JS Lấy kích thước tệp hình ảnh bằng ví dụ về mô-đun hệ thống tệp . Bước 1. Tạo thư mục ứng dụng Bước 2. Tạo tập tin gói Bước 3. Tạo tập lệnh nút Bước 4. Đăng ký tập lệnh trong nút Bước 5. Tìm kích thước tệp |
