Cuộn trang vô tận: lợi hay hại? Phân trang. tùy chọn tải lười biếng cho hình ảnh
“Tôi nên sử dụng nội dung gì – phân trang hay cuộn?” Một số nhà thiết kế vẫn gặp khó khăn trong việc lựa chọn phương pháp này hay phương pháp khác cho dự án của họ. Mọi quyết định đều có điểm mạnh và mặt yếu, và chúng ta sẽ xem xét tất cả chúng trong bài viết này. Bạn sẽ làm điều đó dễ dàng hơn sự lựa chọn đúng đắn cho các dự án khác nhau.
Cuộn vô hạn là một kỹ thuật cho phép người dùng cuộn qua một luồng nội dung khổng lồ mà không nhìn thấy dòng kết thúc. Kỹ thuật này làm mới trang khi bạn cuộn nội dung xuống. Nghe có vẻ hấp dẫn nhưng rõ ràng đây không phải là giải pháp phù hợp cho mọi trang web hoặc ứng dụng.
Lợi ích số 1: Sự tham gia của người dùng và triển khai nội dungKhi bạn sử dụng thao tác cuộn làm phương pháp điều hướng dữ liệu chính, người dùng sẽ ở lại trang web lâu hơn, do đó tăng mức độ tương tác của người dùng. Nhờ sự phổ biến của mạng xã hội, người dùng thường được tiếp xúc với những luồng nội dung khổng lồ; ưu đãi cuộn vô tận phương pháp hiệu quả duyệt qua đại dương thông tin này mà không cần phải đợi tải trang.
Cuộn vô tận gần như là điều bắt buộc đối với các giao diện khám phá. Khi người dùng không tìm kiếm thứ gì đó đặc biệt mà chỉ cần duyệt qua một số lượng lớn các yếu tố để tìm thấy những gì bạn thích.
Một biển ghim trên Pinterest Bạn có thể thấy lợi ích của việc cuộn vô hạn bằng cách sử dụng nguồn cấp tin tức Facebook làm ví dụ. Theo thỏa thuận ngầm, người dùng biết rằng họ sẽ không thể xem mọi thứ trong nguồn cấp dữ liệu vì nội dung được cập nhật quá thường xuyên. Với khả năng cuộn vô hạn, Facebook cố gắng hiển thị cho người dùng nhiều thông tin nhất có thể khi họ xem luồng dữ liệu này.
Bảng tin trên Facebook: người dùng cuộn ngày càng nhiều để cập nhật nội dung Lợi ích #2: Cuộn tốt hơn nhấp chuột Người dùng thấy thao tác cuộn thuận tiện hơn là nhấp chuột. Sử dụng con lăn chuột hoặc màn hình cảm ứng, việc cuộn sẽ nhanh hơn và dễ dàng hơn so với việc nhấp chuột. Đối với một phần nội dung dài liên tục, chẳng hạn như một bài học, việc cuộn sẽ thuận tiện hơn nhiều so với việc cắt văn bản thành nhiều màn hình hoặc trang riêng biệt.
Nếu bạn sử dụng các lần nhấp chuột thì mỗi phần cập nhật nội dung sẽ yêu cầu một lần nhấp chuột bổ sung cũng như thời gian để tải trang. Để cuộn: nội dung được cập nhật liên tục, chỉ cần một thao tác. Nguồn: Designbolts Lợi ích #3: Cuộn trang tốt cho thiết bị di động Làm sao màn hình nhỏ hơn, cuộn càng dài. Sự phổ biến của trình duyệt di động cũng ủng hộ việc cuộn. Bật điều khiển bằng cử chỉ thiêt bị di động làm cho việc cuộn rất dễ dàng. Kết quả là, người dùng có được trải nghiệm phản hồi thực sự bất kể họ đang sử dụng thiết bị nào.
Tốc độ tải trang quyết định phần lớn đến trải nghiệm người dùng. Nhiều nghiên cứu đã chỉ ra rằng tải chậm dẫn đến việc mọi người chỉ cần rời khỏi trang web hoặc xóa ứng dụng và điều này dẫn đến tỷ lệ chuyển đổi thấp. Và đây là tin xấu đối với những người sử dụng tính năng cuộn vô hạn. Người dùng cuộn xuống trang càng nhiều thì càng có nhiều nội dung được tải trên một trang. Kết quả là hiệu suất của trang chậm lại rất nhiều.
Một vấn đề khác là tài nguyên thiết bị hạn chế. Trên nhiều trang web cuộn vô tận, đặc biệt là những trang có nhiều hình ảnh, các thiết bị có nguồn tài nguyên hạn chế như iPad có thể trở nên chậm chạp do khối lượng nội dung được tải quá lớn.
Nhược điểm #2: Tìm kiếm và định vị dữ liệuMột vấn đề khác với thao tác cuộn vô hạn xảy ra khi người dùng đến một điểm nhất định trong chuỗi, họ không thể đánh dấu vị trí của mình và quay lại sau. Nếu họ rời khỏi trang web, họ sẽ mất tiến trình và sẽ phải cuộn xuống lần nữa để đến điểm tương tự. Việc không xác định được vị trí của người dùng khi cuộn không chỉ gây bất tiện cho người dùng mà còn làm hỏng toàn bộ trải nghiệm tương tác với sản phẩm.
Vào năm 2012, Etsy đã dành nhiều thời gian triển khai giao diện cuộn và phát hiện ra rằng giao diện mớiđã không hoạt động tốt như phiên bản cũ với phân trang. Và mặc dù số lượng bán hàng hầu như không thay đổi nhưng mức độ tương tác của người dùng đã giảm - mọi người không còn tích cực sử dụng tìm kiếm như trước nữa.
Giao diện tìm kiếm cuộn vô hạn trên Etsy. Phiên bản hiện tại dựa trên phân trang. Như Dmitry Fadeev lưu ý: “Mọi người sẽ muốn quay lại danh sách kết quả tìm kiếm để kiểm tra các vị trí họ vừa xem, so sánh chúng với các sản phẩm khác ở đâu đó ở cuối danh sách. Việc cuộn vô hạn không chỉ phá vỡ tính năng động này mà còn gây khó khăn cho việc di chuyển lên xuống danh sách, đặc biệt khi bạn cần quay lại trang vào lúc khác và bị ném trở lại đầu trang, phải cuộn xuống lần nữa và chờ đợi để tải nội dung. Do đó, giao diện cuộn vô hạn thực sự chậm hơn giao diện được phân trang.”
Lỗ hổng #3: Thanh cuộn không liên quanThanh cuộn không phản ánh lượng dữ liệu thực tế có sẵn. Bạn sẽ vui vẻ cuộn xuống vì nghĩ rằng mình đã gần đến cuối, điều này buộc bạn phải cuộn thêm một chút, chỉ để thấy rằng kết quả chỉ đơn giản là tăng gấp đôi về số lượng. Từ quan điểm về khả năng tiếp cận và dễ hiểu của giao diện, điều này không tốt lắm.
Thanh cuộn phải phản ánh độ dài thực tế của trang Nhược điểm #4: Thiếu phần chân trang. Chân trang tồn tại vì một lý do: chúng chứa nội dung cần thiết cho người dùng– nếu người dùng không thể tìm thấy thứ gì đó hoặc họ cần thông tin thêm, họ thường đến đó. Nhưng vì nguồn cấp dữ liệu cuộn không ngừng, nên khi người dùng đến cuối trang, một phần dữ liệu khác sẽ được tải và đơn giản là không thể truy cập được chân trang.
Khi cuộn vô hạn được giới thiệu trên LinkedIn vào năm 2012, người dùng có thể cuộn màn hình trước khi nội dung được tải. Các trang web có khả năng cuộn vô hạn sẽ có thể tiếp cận chân trang, làm cho nó trở nên hấp dẫn hoặc di chuyển liên kết đến đầu trang hoặc thanh bên.
Facebook đã chuyển tất cả các liên kết từ chân trang (ví dụ: 'Pháp lý', 'Nghề nghiệp') sang bảng bên phải. Ngoài ra, bạn có thể tạo nút Load More để tải nội dung theo yêu cầu. Nội dung mới sẽ không tự động tải cho đến khi người dùng nhấp vào nút. Bằng cách này, người dùng có thể tiếp cận tầng hầm mà không gặp vấn đề gì.
Instagram cung cấp nút ‘Tải thêm’ để đảm bảo rằng chân trang luôn có sẵn cho người dùng. Phân trang chia nội dung thành các trang riêng biệt. Nếu bạn cuộn xuống trang và thấy một dãy số thì dãy số này chính là số trang của trang web hoặc ứng dụng.
Lợi ích số 1: Chuyển đổi tốt Phân trang hoạt động tốt khi người dùng đang tìm kiếm thứ gì đó trong danh sách kết quả thay vì chỉ duyệt qua luồng dữ liệu.
Bạn có thể đánh giá cao lợi ích của việc phân trang tại Ví dụ về Google Tìm kiếm. Việc tìm kiếm kết quả tìm kiếm tốt nhất sẽ mất một giây hoặc một giờ, tùy thuộc vào chủ đề nghiên cứu của bạn. Nhưng khi bạn quyết định ngừng tìm kiếm trên Google theo định dạng hiện tại, bạn sẽ biết chính xác số lượng kết quả tìm kiếm. Bạn có thể quyết định khi nào nên dừng và xem bao nhiêu kết quả.
Dữ liệu kết quả tìm kiếm của Google Lợi ích #2: Cảm giác được kiểm soát Cuộn vô tận giống như một trò chơi bất tận - dù bạn có đi bao xa, cảm giác như bạn sẽ không bao giờ đến đích. Khi người dùng biết số lượng kết quả có sẵn, họ có thể đưa ra quyết định sáng suốt hơn thay vì phải tìm hiểu kỹ danh sách được cập nhật liên tục. David Kieras, trong nghiên cứu “Tâm lý tương tác giữa con người và máy tính”, lưu ý: “Việc đạt đến điểm cuối mang lại cảm giác kiểm soát”. Nghiên cứu cũng giải thích rằng khi người dùng có kết quả hạn chế nhưng phù hợp, họ có thể dễ dàng xác định xem thứ họ đang tìm kiếm có ở đó hay không.
Ngoài ra, khi người dùng nhìn thấy tổng số kết quả (tất nhiên là không phải là vô hạn), họ sẽ dễ dàng ước tính thời gian tìm kiếm sẽ mất bao lâu hơn. vật liệu cần thiết.
Lợi ích #3: Vị trí yếu tốGiao diện dựa trên trang giúp bạn có thể ghi nhớ liên tục vị trí của một phần tử. Người dùng sẽ không nhất thiết phải nhớ số lượng chính xác các trang, nhưng họ sẽ nhớ nó một cách đại khái và các liên kết được đánh số sẽ giúp họ đến đó nhanh hơn.
Với tính năng phân trang, người dùng kiểm soát việc điều hướng vì họ biết nên chọn trang nào để đến được vị trí của mình. Phân trang là tốt cho các trang web và ứng dụng thương mại. Khi người dùng mua sắm trực tuyến, họ muốn có thể quay lại nơi họ đã dừng lại và tiếp tục mua sắm.
Trang web MR Porter sử dụng tính năng phân trang cho sản phẩm. Hành động bổ sung Để chuyển đến một trang mới bằng cách phân trang, người dùng phải tìm liên kết đích (ví dụ: “Tiếp theo”), di chuột qua liên kết đó, nhấp và đợi cho nó tải trang mới.
Để có được nội dung bạn cần phải bấm vào Vấn đề chính là hầu hết các trang web đều hiển thị cho người dùng một lượng nội dung rất hạn chế trên một trang. Bằng cách làm cho trang dài hơn mà không ảnh hưởng đến tốc độ tải, bạn sẽ cung cấp cho người dùng nhiều nội dung hơn trên trang và giảm số lần nhấp chuột cần thiết.
Khi nào bạn nên sử dụng tính năng cuộn/phân trang vô hạn?Chỉ có một số trường hợp cuộn vô hạn có hiệu quả. Nó phù hợp nhất cho các trang web và ứng dụng có nội dung do người dùng tạo (Twitter, Facebook) hoặc nội dung trực quan (Pinterest, Instagram). Mặt khác, phân trang rất mạnh mẽ và phù hợp với các trang web và ứng dụng phục vụ cho hành động được nhắm mục tiêu của người dùng.
Công việc Công cụ tìm kiếm Google là một ví dụ tuyệt vời về các trang web như vậy. Google Hình ảnh sử dụng tính năng cuộn vô hạn vì người dùng có thể xử lý hình ảnh nhanh hơn nhiều so với văn bản. Đọc kết quả tìm kiếm mất nhiều thời gian hơn. Đây là lý do tại sao kết quả của Google Tìm kiếm vẫn được hiển thị theo cách truyền thống hơn.
Phần kết luậnCác nhà thiết kế phải cân nhắc ưu và nhược điểm của việc cuộn và phân trang vô hạn trước khi đưa ra lựa chọn. Sự lựa chọn phụ thuộc vào thiết kế nội dung và cách phân phối nội dung đó. Nói chung, tính năng cuộn vô hạn hoạt động hiệu quả đối với các dự án như Twitter, nơi người dùng sử dụng luồng dữ liệu vô tận mà không cần tìm kiếm bất kỳ nội dung cụ thể nào và tính năng phân trang hoạt động tốt hơn cho các trang kết quả tìm kiếm, nơi mọi người đang tìm kiếm thứ gì đó cụ thể và vị trí của các phần tử dữ liệu là quan trọng.
Nếu bạn đã từng đăng nhập vào Twitter hoặc tìm kiếm một hình ảnh trên Google, bạn có thể đã từng thấy thao tác cuộn vô hạn. Bạn có thể dành hàng giờ để cuộn qua một trang mà không thấy điểm kết thúc.
TRONG những năm trước các nhà tiếp thị đã tích cực thử nghiệm các loại nội dung khác nhau. Tuy nhiên, hiện nay câu hỏi làm thế nào để hiển thị thông tin trên màn hình một cách tốt nhất để người dùng cảm thấy thoải mái nhất có thể ngày càng được đặt lên hàng đầu. Và cuộn vô hạn là một trong những giải pháp phổ biến nhất hiện nay.
Bạn muốn hiểu cách cuộn vô hạn ảnh hưởng đến SEO và liệu nó có đáng để sử dụng trên trang web của bạn không? Đầu tiên bạn cần phải quyết định công cụ này là gì.
Ưu điểm và nhược điểm của cuộn vô hạn
Cách tiếp cận công việc tương tự có thể dẫn một công ty đến thành công và một công ty khác đến thất bại. Cuộn vô hạn chắc chắn là một trong những cách hứa hẹn nhất để trình bày nội dung cho người đọc. Tuy nhiên, điều này không có nghĩa là bạn nên chuyển ngay sang cuộn vô hạn: trước tiên, bạn nên xem xét tất cả những ưu và nhược điểm.
Lợi ích của việc cuộn vô hạn
1. Thuận tiện cho người dùng di động
Khi sử dụng điện thoại với màn hình cảm ứng Việc cuộn trang sẽ dễ dàng hơn nhiều so với việc nhấp vào các liên kết nhỏ.
2. Nó giúp thu hút sự chú ý của người đọc
3. Việc hiển thị lượng lớn thông tin trên màn hình sẽ thuận tiện hơn
Bạn có muốn đăng một bài viết có kích thước ấn tượng trên trang web của mình nhưng không muốn chia nó thành nhiều phần? Việc cuộn vô tận sẽ giúp bạn thoát khỏi tình trạng này.
4. Lý tưởng cho các trang web cập nhật thông tin theo thời gian thực
Cuộn vô hạn là giải pháp tối ưuđối với các tài nguyên cung cấp dữ liệu thời gian thực. Đây là một lý do khác khiến mạng xã hội thích công cụ này.
5. Cuộn vô hạn không gây bất tiện cho người dùng liên quan đến tốc độ tải
Các tài nguyên triển khai hệ thống cuộn vô hạn cung cấp trung bình 7 thông báo mới cho người dùng trên mỗi lần cuộn, không khác nhiều so với chỉ báo của các trang web có các loại điều hướng khác.
Nhược điểm của cuộn vô hạn
1. Việc tìm kiếm thông tin bạn cần gặp khó khăn.
Nếu người đọc cần truy cập một phần nội dung cụ thể trên một trang web cuộn vô hạn, họ sẽ buộc phải chi tiêu thời gian nhất địnhđể cuộn trang. Đây là lý do tại sao Google không cung cấp cho người dùng khả năng cuộn vô hạn để xem kết quả tìm kiếm.
2. Nó không cho phép bạn sử dụng chân trang
Chân trang là nơi bạn có thể đặt liên kết đến lịch sử của công ty hoặc thông tin liên hệ chẳng hạn. Nhiều người đã quen với việc tìm kiếm thông tin này ở cuối trang. Nếu bạn sử dụng tính năng cuộn vô hạn, bạn sẽ phải tìm một nơi khác để đặt thông tin trợ giúp của mình.
3. Nó không cho phép người dùng bỏ qua nội dung không thú vị chỉ bằng một cú nhấp chuột
Một khách truy cập vào một trang web có khả năng cuộn vô tận mà gặp phải nội dung không mấy thú vị đối với anh ta sẽ buộc phải cuộn qua nội dung đó theo cách thủ công.
4. Cuộn vô hạn làm tăng tải cho máy chủ
Khi giới thiệu tính năng cuộn vô hạn, JavaScript được sử dụng tích cực, do đó các yêu cầu về hiệu suất máy chủ không ngừng tăng lên.
Làm thế nào để bạn biết liệu trang web của bạn có cần cuộn vô hạn hay không?
Những ưu và nhược điểm của việc cuộn vô hạn được liệt kê ở trên giúp bạn có ý tưởng chung về công cụ này. Nếu bạn vẫn không chắc chắn có nên sử dụng nó hay không, hãy trả lời hai câu hỏi:
1. Doanh nghiệp của bạn có yêu cầu người dùng tìm kiếm sản phẩm hoặc dịch vụ trên trang web không?
Nếu vậy, việc chọn cuộn vô hạn có thể gây ra hậu quả cực kỳ tiêu cực cho bạn.
Các công ty hoạt động trong lĩnh vực thương mại điện tử, chẳng hạn, không thể biết khách hàng tiếp theo của họ sẽ cần gì hoặc họ nên cung cấp thông tin gì. Nếu bạn mong muốn người dùng đến được phần mà họ đang tìm kiếm, nhiệm vụ của bạn là làm cho đường dẫn của họ trở nên dễ dàng nhất có thể. Và cuộn vô tận trong trường hợp này có thể gây ra vấn đề cho khách hàng.
Lấy ví dụ, Etsy, một nền tảng giao dịch trực tuyến lớn. Công ty đã thử sử dụng tính năng cuộn vô hạn trên trang web của mình nhưng không thể thu được bất kỳ lợi ích nào từ nó. Kỹ sư trưởng của Etsy Dan McKinley không thể đưa ra lời giải thích rõ ràng sự thật này. Đây là những gì anh ấy nói về cuộn vô hạn:
“Mọi người cực kỳ nhạy cảm với bất kỳ thay đổi giao diện nào. Nhưng nếu thuật toán tìm kiếm trả về 16 kết quả phù hợp nhất trong phần trên cùng danh sách, cuộn vô hạn cho phép người dùng, mà không cần tốn thêm công sức, có được số lượng "vô hạn" các kết quả ít liên quan hơn (trong trường hợp không có hệ thống cuộn vô hạn, anh ta sẽ phải nhấp vào nút tương ứng).
Tôi không có ý nói rằng việc cuộn vô tận là ngu ngốc. Công cụ này có thể mang lại nhiều lợi ích, nhưng trước khi bạn quyết định sử dụng nó, hãy thử xác định xem người dùng sẽ phản ứng thế nào với sự đổi mới.”
Nếu bạn nghiêm túc về việc sử dụng tính năng cuộn vô hạn trên trang web của mình, bạn nên thực hiện thử nghiệm phân tách. Điều này sẽ cho phép bạn hiểu khách hàng của bạn thích kiểu điều hướng này đến mức nào.
2. Trang web của bạn có chủ yếu cung cấp nội dung không?
Nếu vậy, cuộn vô hạn có lẽ là thứ bạn cần.
Tất cả nội dung của các trang web được thiết kế để giải trí cho khách truy cập đều có ích như nhau đối với những trang đó. Chủ sở hữu của loại trang web này không quan tâm người dùng sẽ truy cập vào trang nào. Điều chính là nội dung mà anh ấy tìm thấy ở đó có khả năng thu hút sự chú ý của anh ấy.
BẰNG ví dụ rõ ràng Bạn có thể trích dẫn trang tin tức Inc. Như bạn có thể thấy, một phần quan trọng của trang bị chiếm bởi . Đồng thời, thông tin được sắp xếp sao cho quá trình nhận thức trở nên dễ dàng nhất có thể.
Các tài nguyên như Inc. hoặc Mashable, thường không có footer, thay thế khá thành công nút menu ở đầu trang. Do đó, người dùng có quyền lựa chọn: anh ta có thể ngay lập tức chuyển đến yếu tố cụ thể trang web hoặc chỉ cần cuộn qua nguồn cấp dữ liệu để tìm kiếm các tài liệu thú vị.
Việc sử dụng cuộn vô hạn ảnh hưởng đến SEO như thế nào?
Nếu bạn định triển khai tính năng cuộn vô hạn, bạn nên tìm hiểu cách họ “xử lý” ý tưởng này công cụ tìm kiếm. Đây là những gì Scott Langdon của HigherVisibility nói về điều này:
"Khi quét một trang web bằng hệ thống cuộn vô hạn Robot của Google sẽ chỉ “nhìn thấy” phần thông tin mà người dùng nhìn thấy trước lần cuộn đầu tiên. Nội dung còn lại sẽ không được lập chỉ mục và theo đó, sẽ không thể xuất hiện trên trang kết quả tìm kiếm cho một yêu cầu cụ thể.”
Tuy nhiên, vấn đề này có thể được giải quyết. Lời khuyên của John Muller, đại diện cho Google, sẽ giúp bạn làm được điều này:
Sơ đồ bên dưới cho thấy cách thực hiện và không phân trang (trong trường hợp thứ hai, một số thành phần nội dung sẽ được lập chỉ mục hai lần).
là từ chối tải tất cả nội dung trên một trang khi không cần thiết. Điều này áp dụng một điểm đánh dấu cho biết dữ liệu chưa được tải nhưng nếu cần, nó sẽ cần được tải.Sử dụng tải chậm, hình ảnh và các tài liệu khác trên trang web được tải không đồng bộ và cụ thể hơn là sau khi phần hiển thị của trang web được tải hoàn toàn hoặc chỉ khi phần hiển thị của cửa sổ trình duyệt được hiển thị. Ví dụ: nếu khách truy cập không cuộn đến cuối trang thì hình ảnh ở cuối trang sẽ không tải.
Tải chậm có liên quan đến nhiều tài nguyên, đặc biệt là những tài nguyên có nhiều hình ảnh. Truy cập bất kỳ dịch vụ ảnh trực tuyến nào ở độ phân giải cao và lưu ý cách trang web chỉ tải những ảnh hiển thị trên màn hình của bạn và khi bạn cuộn xuống, các ảnh mới sẽ bắt đầu tải ngay khi chúng xuất hiện trên màn hình của bạn. Khi bạn cuộn, phần giữ chỗ sẽ được thay thế bằng hình ảnh có độ phân giải cao.
Thường có những trường hợp mọi người không thể nhìn thấy một đoạn nhất định của trang nhưng một lượng lớn tài nguyên được sử dụng để xử lý nó hoặc truyền tài liệu. Đó là lúc phải nghĩ đến việc lười tải, điều này sẽ loại bỏ việc tạo và tải yếu tố ẩn cho đến khi chúng cần được xem hoặc sử dụng.
Trên một ghi chú. Tải từng phần được kích hoạt bởi và được tạo bởi các sự kiện được giám sát bởi . Vì vậy, trước khi sử dụng tải không đồng bộĐiều quan trọng cần lưu ý là đối với người dùng không có JS, chức năng này sẽ không khả dụng và robot của công cụ tìm kiếm sẽ không nhìn thấy nó ẩn bởi kịch bản nội dung.
Bây giờ hãy nói về hai lý do chính đáng tại sao bạn nên chọn tải chậm:
Dựa trên những điều trên, chúng ta có thể kết luận rằng việc lười tải cải thiện đáng kể hiệu suất trang web.
Các kiểu tải chậmĐể cải thiện hiệu suất trang web, bạn cần tạo tập lệnh tải chậm cho hình ảnh và nội dung. Có nhiều lựa chọn về cách thực hiện việc này.
5 tùy chọn tải hình ảnh lười biếngHãy nói về những điều phổ biến nhất và giải pháp làm sẵn lười tải hình ảnh.
Trong phiên bản đơn giản, tập lệnh tải chậm này sẽ thay thế thuộc tính src bằng data-src trong thẻ img:
Các phần tử img chứa thuộc tính data-src bị ẩn trong . Sau khi hình ảnh được tải, chúng sẽ được hiển thị mượt mà bằng cách sử dụng các hiệu ứng chuyển tiếp:
Img (độ mờ: 1; chuyển tiếp: độ mờ 0,3 giây; ) img (độ mờ: 0; )
JavaScript sau đó chuyển tất cả các thẻ img thuộc tính src, cuối cùng nhận được giá trị của thuộc tính data-src. Sau khi tất cả hình ảnh đã được tải, data-src sẽ bị xóa khỏi img :
ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribution("src", img.getAttribution("data-src")); img.onload = function() ( img.removeAttribution( "dữ liệu-src"); ); ));
David Walsh cũng cung cấp một giải pháp dự phòng trong trường hợp JavaScript bị lỗi, cách này hiệu quả và dễ triển khai. Tuy nhiên, chức năng của nó không cho phép tải khi cuộn trang web. Điều này có nghĩa là trình duyệt tải tất cả hình ảnh, bất kể khách truy cập có “tiếp cận” được chúng hay không. Có, tính năng dự phòng cho phép bạn hiển thị trang nhanh hơn vì hình ảnh được tải sau HTML nhưng sẽ không tiết kiệm được lưu lượng truy cập.
Kỹ thuật này liên quan đến việc tải chậm, sử dụng JS như một phần nâng cao cho CSS và HTML tiêu chuẩn. Cải tiến lũy tiến đảm bảo rằng hình ảnh được hiển thị cho người dùng ngay cả khi JavaScript chịu trách nhiệm hiển thị chúng bị tắt hoặc xuất hiện lỗi khiến tập lệnh không hoạt động.
Tăng cường lũy tiến có một số lợi ích:
Bạn có thể tìm hiểu thông tin chi tiết về giải pháp Osborne.
Số 3. Plugin bLazy.js sử dụng JS đơn giảnTập lệnh này nhẹ, thực hiện tải không đồng bộ và hoạt động với nhiều hình ảnh để tiết kiệm lưu lượng truy cập và yêu cầu máy chủ. Công dụng của nó cung cấp:
Thực hiện tiêu chuẩn. Đánh dấu:
Thẻ img cần được thay đổi:
JavaScript: chỉ định lệnh gọi bLazy tiêu chuẩn và định cấu hình đối tượng bằng bản đồ tùy chọn:
Var bLazy = Blazy mới(( //options ));
Số 4. Plugin jQuery Lazy Load XTMột plugin tuyệt vời để viết tập lệnh tải chậm của riêng bạn một cách thuận tiện. Lưu ý rằng có phiên bản đầy đủ plugin jQuery, trong đó thông qua tải không đồng bộ, bạn có thể tải video, iframe và các thẻ khác có chứa thuộc tính src và có một thuộc tính được đơn giản hóa, dành riêng cho việc tải từng phần đơn giản.
Để sử dụng plugin trên trang web, bạn cần thêm thư viện jQuery trước thẻ đóng, chỉ định jquery.lazyloadxt.js (phiên bản đơn giản hóa) hoặc jquery.lazyloadxt.extra.js (mở rộng):
Cũng có Lựa chọn thay thế, cho phép bạn không sử dụng toàn bộ plugin - một tập lệnh nhẹ jqlight.lazyloadxt.min.js:
Trong hình ảnh, thay thế src bằng thuộc tính data-src:
Plugin có thể được kích hoạt tự động hoặc bạn có thể tự làm điều đó. Để thực hiện việc này, chỉ cần nhập:
$(elements).lazyLoadXT();
Lazy Load XT jQuetry bổ sung một số lượng lớn các addon. Ví dụ:
Ưu điểm của kỹ thuật:
Bạn có thể xem tất cả các tiện ích bổ sung và tùy chọn bằng liên kết này.
№5. Bức ảnh bị mờ bởi Craig BucklerBạn có thể nhận thấy trên một số trang web hình ảnh chính của một bài viết lúc đầu bị mờ, sau đó hình ảnh rõ ràng sẽ được tải lên. Chất lượng cao. Có một số tùy chọn để tải ảnh lên bằng phương pháp hiệu ứng làm mờ. Một trong những người giỏi nhất là Craig Buckler.
Ưu điểm của kỹ thuật này là:
Bạn có thể tải xuống mã từ kho lưu trữ trang GitHub.
Trước tiên, bạn cần bao gồm thư viện jQuery:
Bản chất của phương pháp là tải nội dung cần thiết bằng AJAX phần tử div từ tệp bên trái đến trang đích.
danh mục đầu tư 
Cho xem nhiều hơn...
Mọi thứ khá đơn giản và rõ ràng. Nhưng bạn cần chú ý đến div có id=”smartPortfolio”, vì chúng nằm trong tập lệnh quan trọng nhất chịu trách nhiệm tải nội dung từ tài liệu của bên thứ ba. “Vùng chứa” của danh mục đầu tư là SmartPortfolio. MoreButton – một nút mà khi được nhấp vào sẽ tải một đoạn danh mục đầu tư khác. LoadingDiv – một phần của trang nơi văn bản sẽ được hiển thị nếu mở hoàn toàn danh mục đầu tư hoặc bất kỳ lỗi nào xảy ra.
Ví dụ: nhiều người đọc bài viết sẽ kiểm tra tập lệnh thông qua tập tin chỉ mục trong trình duyệt, thay vì tải nó lên máy chủ. Điều này sẽ hiển thị một thông báo lỗi. Và nếu kết nối Internet yếu thì quá trình tải xuống tệp sẽ lâu hơn. Vì vậy, điều quan trọng là phải viết tin nhắn hoặc chèn ảnh để người dùng biết rằng quá trình tải xuống đang được tiến hành.
Đây là đoạn script, để kết nối nó, bạn cần chèn mã trước đoạn mã đóng thẻ cơ thể :
Var lười tải = lười tải || (); (function($, lườiload) ("use strict"; var page = 2, ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lườiload.load = function() ( var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, thành công: function(response) ( if ( !response || reply.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfoliofullload"); return; )appendContests(response); ), lỗi : function(response) ( $(loadingId).text("Xin lỗi, đã xảy ra lỗi với yêu cầu. Vui lòng làm mới trang."); ) )); varappendContests = function(response) ( var id = $(buttonId ); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); trang += 1; ); ))(jQuery, lười tải) ;
Trong cấu trúc của tài nguyên web, các trang mà dữ liệu sẽ được tải khi được nhấp vào sẽ nằm trong thư mục trang. Nó chứa 3 tập tin, cái cuối cùng trống. Điều này được cung cấp bởi logic kịch bản. Đường dẫn trong đó trông như thế này:
Var url = "./pages/" + trang + ".html";
Nhưng khi sử dụng một đường dẫn khác, điều quan trọng là phải thay thế nó trong chính tập lệnh. Điều tương tự cũng cần được thực hiện nếu bạn sử dụng các ID khác:
ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";
Sau đó, như đã đề cập trước đó, trước thẻ body (đóng), chúng tôi chỉ ra tập lệnh:
Phần kết luận
Tải chậm cho phép bạn tăng tốc hiệu suất trang web và tiết kiệm đáng kể lưu lượng truy cập do các đối tượng nằm ngoài phạm vi hiển thị của cửa sổ trình duyệt chỉ được tải sau khi người dùng cần. Do có nhiều loại tải không đồng bộ và các tùy chọn triển khai, nó có thể được sử dụng cho các loại trang web khác nhau và lưu lượng truy cập mục tiêu của chúng.
Chúng ta sẽ bắt đầu với trang thông thường thư viện chứa vùng chứa hình ảnh của chúng tôi và chúng tôi sẽ theo dõi vị trí cuộn bằng lệnh gọi Hàm JavaScript với một khoảng thời gian ngắn. Mỗi khi thanh cuộn ở cuối trang, chúng ta sẽ thực hiện Yêu cầu AJAX ra bên ngoài tập tin PHP trả về danh sách tên hình ảnh. Sau đó, tất cả những gì chúng ta cần làm là thêm những hình ảnh này vào vùng chứa của mình và sửa đổi chiều cao của trang bằng cách di chuyển vị trí cuộn lên cao hơn.
Bước 2: Đánh dấu HTMLỞ đây chúng ta chỉ cần đặt tiêu đề và vùng chứa cho hình ảnh của mình. Các hình thu nhỏ sẽ được nhóm thành bộ ba dòng. Mỗi hình thu nhỏ chứa một liên kết đến hình ảnh có kích thước đầy đủ. Sau mỗi nhóm, chúng tôi sẽ thêm văn bản hiển thị tổng số hình ảnh được hiển thị và liên kết đến đầu trang.
Thư viện web| Cuộn vô hạn 
Hiển thị 9 hình ảnh | Hướng lên
Bước 3: CSS CSS cũng khá đơn giản.
Nội dung( nền:#222; màu:#666; ) #header( font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent: 35px; lề: 0 tự động; chiều rộng:800px; lề-dưới:10px; ) hr( lề: 20px; viền:none; viền-trên: 1px rắn #111; viền-dưới: 1px rắn #333; ) p( màu :#444; căn chỉnh văn bản:trái; cỡ chữ:10px; lề trái: 20px; lề dưới: -10px; ) a( color:#444; ) 
Bây giờ hãy thêm một số CSS3 để làm tròn các góc và vẽ bóng. Cần sử dụng -moz-box-bóng Và -moz-biên giới-bán kính dành cho Firefox và -webkit-box-bóng Và -webkit-biên giới-bán kính dành cho Chrome và Safari.
#container(margin: 0 auto; width:800px; border:1px Solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text -align:center; ) img( border:10px Solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; lề: 15px; ) img:hover( border-color:#555; - moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111; ) 
Nó sẽ rất ngắn. Bạn cần gọi tập lệnh PHP có chỉ mục hình ảnh tiếp theo mà chúng ta cần làm tham số. Điều đầu tiên chúng ta cần làm là lấy tất cả tên hình ảnh từ thư mục và lưu trữ chúng trong một mảng. Có hai thư mục để lưu trữ hình ảnh: ngón tay cái Và hình ảnh, chứa hình thu nhỏ và hình ảnh kích thước đầy đủ, tương ứng. Hình thu nhỏ phải có tên giống hệt với hình ảnh có kích thước đầy đủ.
Như đã đề cập, hình ảnh được nhóm thành bộ ba hàng, mỗi hàng chứa ba hình ảnh. Bằng cách này, chúng ta chỉ cần trả về chín tên hình ảnh cho nhóm. Chúng tôi bắt đầu từ chỉ mục mà chúng tôi nhận được dưới dạng tham số, $n, và chúng ta kết thúc $n+9. Ở mỗi bước của vòng lặp, chúng ta thêm tên của hình ảnh và ";" sau nó trong dòng văn bản trả về. Có một mẹo nhỏ ở đây. Chúng tôi không cần vô số số lượng hình ảnh. Để tạo hiệu ứng thư viện vô tận không bao giờ kết thúc, mỗi lần chỉ số của ảnh tiếp theo phải lớn hơn tổng số ảnh và chúng ta phải bắt đầu lại từ đầu. Việc này được thực hiện bằng cách sử dụng hàm % (phân chia modulo) chỉ số và tổng số hình ảnh.
$i%count($files)
Kết quả là ta được phần dư của phép chia. Ví dụ, nếu chỉ số $i đếm ($ tập tin) là 45 thì kết quả sẽ là 5. Và nếu chỉ số $i là 50 và số lượng hình ảnh đếm ($ tập tin) là 65 thì kết quả sẽ là 50. Cuối cùng, chúng ta trả về văn bản phản hồi.
Bước 7Đây là toàn văn Tập lệnh PHP. Nó cần phải được đặt trong một tập tin mới .php.
Bước 8: JavaScript
Hãy xác định một số biến sẽ cần thiết sau này:
Nội dung có chiều cao = 800; var pageHeight = document.documentElement.clientHeight; var cuộnPosition; var n = 10; var xmlhttp; 
Để xác định khi nào thanh cuộn sẽ ở cuối trang, chúng ta cần xác định ba biến:
- nội dungChiều cao- chiều cao của thư viện gốc
- trangChiều cao- chiều cao trang hiển thị trong trình duyệt
- cuộnVị trí- vị trí thanh cuộn được đo từ trên xuống
Chúng ta cũng sẽ cần một biến để lưu trữ chỉ mục của hình ảnh tiếp theo (mà chúng ta chuyển tới tập lệnh PHP) và một biến cho đối tượng yêu cầu Ajax.
Bước 9Chúng ta cần xác định một hàm sẽ thêm hình ảnh vào vùng chứa HTML của mình.
Hàm putImages())( if (xmlhttp.readyState==4)( if(xmlhttp.responseText)(
Đối tượng yêu cầu thay đổi trạng thái của nó trong quá trình thực hiện yêu cầu. Mỗi trạng thái được liên kết với giá trị số. Chúng tôi quan tâm đến trạng thái cuối cùng khi yêu cầu được hoàn thành và giá trị là 4. Đầu tiên chúng tôi kiểm tra xem yêu cầu có ở trạng thái không trong điều kiện phù hợp và sau đó chúng tôi kiểm tra xem chúng tôi có nhận được phản hồi hay không.
Bước 10Nếu cả hai điều kiện đều được đáp ứng, chúng ta phải xử lý văn bản trả về. Điều này có nghĩa là chúng ta phải tách tên tệp và đặt chúng vào một mảng. Tập lệnh PHP trả về một chuỗi đơn có các tên được phân tách bằng dấu chấm phẩy, ví dụ: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg ; EndlessSlights.jpg;"
Var resp = xmlhttp.responseText.replace("\r\n", ""); var files = resp.split(";");
Chúng ta cần giải quyết một vấn đề nhỏ. Nội dung phản hồi có thể chứa ký tự dòng mới ở vị trí đầu tiên. Và chúng ta không cần anh ta. Vấn đề có thể được giải quyết dễ dàng bằng cách sử dụng hàm thay thế, nhận hai tham số: "\r\n" - ký tự dòng mới và "" - một chuỗi trống thay thế tất cả các lần xuất hiện của tham số đầu tiên. Bây giờ tất cả những gì còn lại là chia dòng bằng ký hiệu ";".
Bước 11Bây giờ chúng ta thêm hình ảnh vào vùng chứa của mình.
Var j = 0; vì(i=0; tôi
