Diễn đàn » PHP - HTML - CSS » Tối ưu hóa tốc độ trang web bằng pjax
Avatar
Hữu Phương https://fb.com/huuphuong.99x
Giới thiệu sơ lượt
Pjax 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, Dai, ʟɪɴʜ ᴆᴀ̃ ᴄᴀ̆ɴɢ và 1 người khác đã thích bài viết này
Files (1) Chapter (0) Share
Trống!
pjax cơ bản.zip
33.85 Kb / Nhóm tệp: Trả phí, Giá: 100 xu
  • BBcode:
  • Markdown: