GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Tăng tốc website của bạn, nâng cao trải nghiệm người dùng với code load trang bằng jQuery

RoSino18k

09-08-2017

Xin chào các thành viên của Cú Đêm Việt Nam. Hôm nay mình xin share một đoạn jQuery ngắn thôi. Nhưng chức năng của nó khá tuyệt vời. Code này mình xin đặt tên nó là code load trang bằng jquery. Có nghĩa là chúng ta sẽ mở 1 trang web bằng jquery chứ không đơn thuần là load của trình duyệt bạn đang dùng vui

Nhược điểm:
- Sợ một số điện thoại đời cũ, java không hỗ trợ... (cũng không sao, không hỗ trợ thì chạy theo mặc định).

Ưu điểm:
- Load trang nhanh hơn.
- Đỡ tốn lưu lượng (theo suy diễn của mình)
- URL vẫn bình thường nhé..
- Nhìn cũng chuyên nghiệp.

Tăng tốc website của bạn, nâng cao trải nghiệm người dùng với code load trang bằng jQuery
[Tải ảnh]

Hướng dẫn cài đặt code load trang JQuery:
- Đầu tiên bạn chèn đoạn code sau dưới thẻ đóng </body> nhé. Nghe có vẻ sai sai nhưng nó có lý đó ngon

(ai hiểu có thể mod lại, riêng mình thấy nó không cần thiết)

<script src="//blog.wapnhanh.com/mi-ajax/jquery-3.2.1.min.js"></script>

<script src="//blog.wapnhanh.com/mi-ajax/mi-load.js"></script>

Mình xin giải thích code trên như sau: đầu tiên chúng ta sẽ import thư viện jQuery để chạy code, vì code của chúng ta chạy trên nền jQuery mà, sau đó là code, link trong code trên là của tác giả, các bạn cứ yên tâm theo đúng tiêu chí hoạt động của cudemvn link code sẽ không die, mình đã để ở đính kèm để đề phòng rồi nhé!!

- Bước tiếp theo bạn cần làm đó là thêm đoạn CSS này vào file css của wap mình:

.loading-wrapper {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

    border: 0 none;

    left: 50%;

    margin-left: -77.5px;

    margin-top: -50px;

    position: fixed;

    top: 50%;

    z-index: 9999999;

    max-width: 155px;

}

.loading-icon {

    opacity: 0.9;

    background-color: #49d479 !important;

    border-radius: 5px;

    display: block;

    line-height: 40px;

    margin: 0;

    padding: 1px;

    text-align: center;

    border: 1px solid #258b36;

    color: #cc1414;

    padding: 0 10px;

}

span.loading-icon:after {

    content: "Đang tải dữ liệu ...";

}

Thực ra CSS này sẽ hiển thị hiệu ứng loading trang thôi. Chức năng đơn giản phải không??

Hướng dẫn sử dụng:
- Bạn hãy thêm tất cả các link muốn load ajax id="mi"
Ví dụ: <a href="/index">Home</a> thì thêm thành <a href="/index" id="mi">Home</a>
- Lưu ý chỉ load được link nội tuyến thôi (link trên wap của bạn thôi)

Demo:

http://blog.wapnhanh.com

Vì demo là Xtgem nên có thể load chậm, nhưng đảm bảo up lên openshift load max nhanh ..
Cái này mình tìm hiểu khá nhiều để làm và không copy của ai nha amen