free web
free web
free web
[ Tin mới · Thành viên · Nội quy · Tìm kiếm · RSS ]
Page 1 of 11
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Code tạo hiệu ứng page loading đẹp cho trang web
Code tạo hiệu ứng page loading đẹp cho trang web
Bom_cute36 Date: Thứ năm, 05.Jan.2017, 3:53 AM | Message # 1
Offline
Cấp độ: ₷oáiҪa
Bài viết: 13
Dưới đây là hướng dẫn các bạn dùng 1 javascript để hiện thông báo nạp trang. Thông báo này rất hữu ích trong trường hợp trang web của bạn khá lớn hoặc tốc độ mạng khá chậm, tao cảm giác dễ chịu và lầm tưởng web bạn load bình thường.

Hình tải về thay thế dòng chữ
Bước 1:Mở trang web bạn định đưa hiệu ứng vào. Nếu bạn sử dụng mã nguồn wordpress thì mở file header.php lên, joomla thì vào template mở file index.php.
Bước 2:Đến vị trí body, thay code dưới vào

Code
<body onLoad="init()" >
<div id="loading" style="position:absolute; width:100%; text-align:center; top:250px;">
Đang nạp trang. Vui lòng đợi giây lát!

<img src="loading.gif" border=0></div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
<
/script>

Xem thử sẽ thấy tác dụng.
Chú ý:
  • Trong đoạn code trên, bạn có thể đổi hình khác bằng cách chỉnh lại tên “loading.gif”, và chỉnh dòng chữ thông báo (phía trên hình) theo ý bạn.
  • Sẽ có nhiều hình cho bạn chèn vào trong file tôi có một số hình:


  • Nếu muốn xem thử ở local, trang web của bạn phải có dung lượng lớn (chèn thử vài hình có kích thước file thật lớn vào là được).
  • Khi xem thử từ lần thứ 2 trở đi, có thể bạn không xem được hiệu ứng, vì browser lấy từ cache ra, nên hiện rất nhanh. Hãy xóa cache trước khi xem thử.
  • Hay nhất là sau khi chèn xong. Upload trang và các hình lên host của bạn để test.


Nguồn bcdonline


Boy cute không e dè - rất sợ té
 
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Code tạo hiệu ứng page loading đẹp cho trang web
Page 1 of 11
Search: