Tối ưu hóa tốc độ trang web bằng pjax
#TOP
Giới thiệu sơ lượtPjax là một plugin jQuery cung cấp trải nghiệm duyệt web cực kỳ nhanh (tải lại trang không cần làm mới) thông qua công nghệ ajax và pushState, đồng thời duy trì trang hiện tại, tiêu đề trang web và nút quay lại (chuyển tiếp) của trình duyệt cũng có thể được sử dụng bình thường.
Hướng dẫn cài đặt:
- Đầu tiên tải file đính kèm ở cuối bài viết về, sau đó up 2 tệp js lên website của bạn.
- Sau đó, thêm 2 javascript này vào <head> hoặc trước thẻ </body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.pjax.js" type="text/javascript"></script>
Hoặc- Thêm code này vào
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
- Thêm đoạn javascript này vào trước thẻ </body>.$(document).pjax('a[target!=_blank]', '#pjax-content', {
fragment: '#pjax-content',
timeout: 8000
});
Giải thích:• #pjax-content là id chứa nội dung khu vực pjax (tùy bạn đặt vị trí).
• timeout: Ajax sẽ tự kích hoạt làm mới nếu nó hết thời gian.
HTML ví dụ
<!DOCTYPE html>
<html>
<head>
<!-- styles, scripts, etc -->
</head>
<body>
<h1>Trang PJAX cơ bản</h1>
<div class="container" id="pjax-content">
// Khu vực nội dung pjax.
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.pjax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).pjax('a[target!=_blank]', '#pjax-content', {
fragment: '#pjax-content',
timeout: 8000
});
</script>
</body>
</html>
* P/S: Về phần hiệu ứng mình sẽ nói sau!
có demo không ợ, mà nó có giống cái này không ta ?http://motthoi.viwap.com
@Phương Cute không, của bác hình như là miload (chưa xem code nên ko rõ) demo thì đây
@Phương Cute nhầm
đây mới đúng
@Phương Cute thấy phần kia // Khu vực nội dung pjax. tưởng nó load giống miload chứ
mà trang kia thấy mọi thứ nó vẫn như bao trang khác mà ta. mà hình như tốc độ tải nó vượt trội hơn á thì phải
@Phương Cute bạn cứ hiểu nom na là khi click vào link nào thì nó cũng ko bị reload lại trang là đc
@Hữu Phương á sao mà ông này có toàn template đẹp đẹp không vậy
@Phương Cute bác nên giao lưu học hỏi những nước khác, có nhiều cái hay lắm...
@Hữu Phương à vụ này được nè, click bất cứ link nào nó cũng tự reload trang thì tui sẽ đưa google ads vào đây
@Hữu Phương có giao lưu với mấy ông Nga ngố mà, nhưng template bên đó khó chịu lắm
@Phương Cute Có gì ko hiểu bác cứ ib t