CuDemVN.Wap.Sh

- 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

Admin* 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

Nguồn: mrducz95
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 181
score
Đánh giá: 4.5/ 5, 181 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-2-181]

Pair of Vintage Old School Fru