Css hình nền động
|
Hình nền lớn mang tính minh họa dường như là xu hướng trong thiết kế web năm nay. Liên kết trong các bài viết gần đây ở đây đã cung cấp một số ví dụ. thesixtyone và bạn đang lắng nghe. đến (từ “Music to Code By”), cùng với các trang web như Flipboard Show
Nếu bạn quyết định đi theo con đường thiết kế cụ thể này, có một số điểm cần lưu ý
Với những điều kiện đó, CSS làm cho nền động rất dễ dàng; Bạn có nhiều lựa chọn khi nói đến Ngoài ra, bạn có thể sử dụng Dù bạn chọn giải pháp nào, bạn cũng nên xác định Cho đoạn mã HTML sau Áp dụng CSS sau (bạn sẽ phải thêm tiền tố của nhà cung cấp để được hỗ trợ trong các trình duyệt cũ hơn) Kết quả sẽ là một hình nền phía sau nội dung sẽ thay đổi tỷ lệ theo kích thước của cửa sổ trình duyệt Chris Coiyer có một công thức rất hay cho ảnh nền toàn màn hình được áp dụng cho phần tử Một lần nữa, bạn sẽ cần áp dụng các tiền tố của nhà cung cấp cho thuộc tính Trong bài viết lần này, hãy cùng mình nghiên cứu từ “lịch sử” cho đến “hiện đại” các vấn đề về lazy-load ảnh nhé (có cả lý thuyết và code). Những dự án trình bày của mình dựa trên kinh nghiệm và kiến thức của bản thân, cộng thêm nghiên cứu và tổng hợp từ nhiều nguồn khác nhau Dự kiến cung cấp cho các bạn cái nhìn đầy đủ nhất về lý thuyết và thực hành. Nếu các bạn có góp ý hay bổ sung gì thì hãy để lại bình luận bên dưới nhé Thuật toán “lazy-loading image” hiện nay đã có nhiều cải tiến so với trước, tuy nhiên mình sẽ không đi ngay vào code mà sẽ tản mạn về lý thuyết một chút. Bạn nào muốn nhảy nhanh đến phần thực hành thì có thể bỏ qua phần chém gió dài dòng của mình nhé  Lý thuyết. Lazy loading là gì?“Trì hoãn” việc tải các tấm ảnh ẩn màn hình. Ảnh addyosmani. com Mình bổ sung phần này dành cho các bạn mới (tươi). Trước khi áp dụng một công nghệ hay kỹ thuật gì đó vào dự án, các bạn nên tìm hiểu về lý thuyết, thuật ngữ liên quan và lý do sử dụng nhé, biết đâu bạn lại đang sử dụng “dao mổ trâu giết gà” đấy tải chậm. có một điều quan trọng các bạn cần hiểu là nó chỉ là một khái niệm (ý tưởng) thôi nhé. Nghĩa là nó có thể được sử dụng trong nhiều trường hợp khác nhau, nhiều ngôn ngữ lập trình khác nhau, và mỗi nơi lại có nhiều cách thực hiện khác nhau, nhưng ý tưởng thì cũng tương đối giống nhau thôi. Ví dụ như trong Angular thì có lazy-loading modules… Mình xin lấy một ví dụ mà chắc ai cũng đã từng gặp, cứ tưởng tượng là mình bước vào một quán nhậu
Bạn có thực sự mong đợi điều trên không?
Lazy loading chính là như vậy. Khi người dùng vào một trang web có rất nhiều tính năng (ảnh), nhiều khi họ chỉ vào từng trang chủ rủ chơi thôi. Và trong trang chủ, họ cũng chỉ xem cái giao diện đầu tiên chứ chưa chắc đã scroll xuống và xem hết. Trong trường hợp đó, tại sao chúng ta lại bắt trình duyệt tải về tất cả mọi tính năng, tất cả mọi bức ảnh khi người dùng chưa cần hoặc có thể không cần đến? Trong giới hạn của bài viết này, mình xin phép chỉ phân tích về kỹ thuật lazy-load ảnh thôi nhé Tại sao lại phải "tải hình ảnh lười biếng"?Giải quyết vấn đề về hiệu suấtKhi bạn viết mã 100 tấm ảnh chứa trong các thẻ Tiết kiệm tài nguyênViệc “trì hoãn” những tài nguyên chưa cần thiết giúp tiết kiệm điện năng CPU, GPU, bộ nhớ, băng thông… đặc biệt là trên các thiết bị di động có tốc độ kết nối chậm Tăng người dùng giải thíchNgày nay số lượng người dùng trên thiết bị di động đã vượt qua tất cả trên máy tính để bàn. Nếu trang của bạn có quá nhiều tác nhân gây ảnh hưởng đến tốc độ tải trang, thì người dùng sẽ cảm thấy rằng đó là một trang web tệ hại và không muốn quay lại lần sau Tăng điểm số trên các trang web đo tốc độ, ví dụ như Pagespeed InsightsNếu bạn quan tâm đến “điểm số” của web thì lazy load sẽ giúp điểm số tăng cao hơn nhé (nếu bạn áp dụng đúng cách). Bên cạnh đó, tốc độ web và trải nghiệm người dùng ảnh hưởng rất lớn đến xếp hạng (xếp hạng) trang web trên Google tìm kiếm nữa nhé Khi nào thì cần “lazy-loading images”?Mặc dù lazy-load có rất nhiều lợi ích như trên, nhưng bạn cần đặt câu hỏi cho bản thân tài liệu bạn có thật sự cần nó không, bởi vì “lazy-load hình ảnh” cũng có những tác hại (mình có chia sẻ ở cuối bài . Vì vậy, khi nào thì chúng ta nên lazy-load hình ảnh của web
Trước khi “lazy-load”, chúng ta cần phải làm gì?Trước khi áp dụng bất kỳ kỹ thuật “lazy-load images” nào, còn rất nhiều việc mà bạn phải làm trước đó
Bản chất của “hình ảnh lười tải” rất đơn giảnBạn nói với trình duyệt rằng. “Trình duyệt này, tao có các tấm ảnh này, nhưng mày đừng tải nó nhé. Khi bất kỳ người dùng nào cuộn đến vị trí ghi ảnh nào, thì bạn hãy tải ảnh ấy ngay”. Có 3 vấn đề cốt lõi mà mình tô đậm trong đoạn hội thoại trên 1. Đừng tải xuống. Khi bạn gán thuộc tính 2. cuộn đến vị trí tấm ảnh. để kiểm tra điều này, các nhà phát triển thường sử dụng các từ gọi là "thủ thuật" như sự kiện 3. download image sheet. để bắt trình duyệt tải ảnh, chúng ta chỉ đơn giản là sao chép ảnh từ Lazy-load ảnh nền cũng chạy theo các bước như trên, chỉ là thay vì sao chép từ Thuật toán 1. lazy-load main system and currentChém gió nhiều rồi, mình vào code ngay nhé. Thay vì đi ngược từ cách “cổ xưa” cho đến cách “hiện đại”, mình xin giới thiệu về cách hiện đại trước. Cách này là cách hệ thống chính (nghĩa là nó không phải lừa), bạn sẽ không cần bất kỳ dòng Javascript nào, hay bất kỳ cấu hình phức tạp nào. Điều duy nhất bạn làm là báo cho trình duyệt biết ảnh nào cần lazy-load là xong, với thuộc tính Thuộc tính
Một điều quan trọng bạn cần lưu ý là nếu bạn muốn lazy-load ảnh nền, thì cách này sẽ không chạy đâu nhé. Thay vào đó bạn phải dùng 2 cách mà mình đề cập nhật bên dưới Một lưu ý khác nữa, là trình duyệt không đợi đến lúc ảnh xuất hiện ở chế độ xem mới tải, mà khi ảnh gần xuất hiện ở chế độ xem là nó đã tải rồi nhé. Điều này giúp trình duyệt tải ảnh chụp sớm nhất có thể để nó có sẵn xuất hiện trên màn hình tạm thời, vì tải cũng mất thời gian mà. Nếu bạn muốn tìm hiểu thêm thì có thể search từ khóa “threshold” nhé Theo trang Can I Use, thuộc tính này đã được hỗ trợ trên Chrome và Firefox, không hỗ trợ IE, còn Safari thì đang thử nghiệm và sẽ sớm có thôi dự phòngTrong trường hợp trình duyệt không hỗ trợ thuộc tính Nguồn. https. //addyosmani. com/blog/tải chậm/ Thuật toán 2. lazy-load sử dụng Intersection Observer APIĐịnh nghĩa về “Intersection Observer API” thì mình không nêu ra ở đây vì nó nằm ngoài phạm vi bài viết. Ứng dụng của nó thì có rất nhiều, và “hình ảnh lười tải” là một trong số những ứng dụng đó. Nói nôm na, bạn sử dụng API này để biết khi nào người dùng cuộn đến vị trí của tấm ảnh, và khi đó họ sử dụng trình duyệt “ép” tải ảnh ngay lập tức Tuy sử dụng Intersection Observer cho việc lazy-load là một cách không quá "lỗi thời", nó vẫn không được hỗ trợ trên IE nhé. Tuy nhiên hầu hết các trình duyệt hiện nay và cả di động nữa đều ủng hộ nó, nên có thể nói đây là cách khá “an toàn” Nếu vì tính chất công việc mà bạn buộc phải hỗ trợ IE, bạn có thể sử dụng polyfill để giả lập API Trình quan sát giao lộ hoặc sử dụng kỹ thuật số 3 tiếp theo sau đây Thuật toán 3. lazy-load sử dụng sự kiện cuộn (resize, directionChange…)Thuật toán này khá cổ điển, có thể xem nó là giải pháp cuối cùng để tải chậm hình ảnh nếu bạn buộc phải hỗ trợ các trình duyệt cũ. Giải pháp này tuy chạy nhưng có nhiều vấn đề về hiệu suất và hiệu ứng giật (lag), vì nó là cách thủ công mà. Bạn sẽ phải tính toán xem vị trí của tấm ảnh xem nó đã xuất hiện trên màn hình chưa, và lặp đi lặp lại mỗi khi người dùng cuộn Mình không khuyến khích các bạn sử dụng cách này để sản xuất nhé. Nếu buộc phải hỗ trợ các trình duyệt cũ, thì polyfill của Intersection Observer ở trên là đủ rồi “Lazy-loading images” có hại không?Mặc dù lazy-load là một kỹ thuật tốt và hiệu quả, nhưng việc sử dụng lazy-load hình ảnh sẽ có một số mặt hại sau 1. Trang bị nhảy khi tấm ảnh được tải (thay đổi bố cục)Vấn đề này thường gặp nhất khi áp dụng lazy-load. Lý do là vì trình duyệt không biết được kích thước của tấm ảnh trước khi nó thực sự tải nó. Vì thế khi load xong tấm ảnh, nó sẽ tạo ra nội dung xung quanh ra xa gây giật mình khá khó chịu. Có rất nhiều cách để giải quyết vấn đề này, nhưng để tránh bài viết quá dài nên mình chỉ đưa ra một cách đơn giản và dễ hiểu nhất thôi. Nếu các bạn cần tìm hiểu thêm nhiều cách khác thì có thể Google hoặc comment bên dưới nhé Cách để tránh thay đổi bố cục thường được thấy là chỉ ra kích thước chính xác của kích thước của ảnh, khi trình duyệt đó sẽ dành chỗ trước cho ảnh đó trên bố cục, để đảm bảo khi tải xong ảnh, nó sẽ lấp đầy đúng khoảng trống đó và không Ngoài ra, bạn nên tránh lazy-load những tấm ảnh ở ngay phần đầu của trang (thuật ngữ chuyên môn gọi là ở trên màn hình đầu tiên) để tránh việc thay đổi bố cục nhé. 2. Khi web bị tắt JavascriptĐối với những người dùng đã tắt Javascript trên trình duyệt (tỉ lệ rất thấp), thì cách sử dụng Intersection Observer hay Tuy nhiên, bạn không cần phải lắng nghe vì tỷ lệ người dùng lướt web thật mà tắt javascript là rất thấp 3. Không tốt cho SEOVẫn là khi sử dụng Intersection Observer hay
4. Add code Javascript only to lazy load vài tấm ảnhNếu dung lượng ảnh cần lazy load chỉ dưới 5 tấm và ảnh của chúng không ảnh hưởng nhiều đến tốc độ tải trang thì mình khuyên các bạn không nên sử dụng lazy load. Điều này chỉ giúp bạn kiếm thêm nhiều dòng mã javascript, và sẽ tốt hơn nếu bạn nhúng cả polyfill vào nữa. Thay vào đó, hãy tìm cách tối ưu hóa ảnh của bạn và sử dụng lazy-load bản địa nếu có thể 5. body, html { min-height: 100%; }
body {
color: white;
background: url(st-marks-square.jpg) center no-repeat;
background-size: cover;
background-color: #444;
}
div#stmark {
width: 40%;
background: rgba(0,0,0,0.6);
border: 5px double white;
margin: 3em;
padding: 2em 2em 0 2em;
float: right;
line-height: 155%;
font-family: Cochin, Times New Roman, Times, serif;
}
div#stmark h1 {
margin-top: 0;
} |
