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...
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.
Bước 1: Download file này về máy Page Loading.
Bước 2: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 3:Đến vị trí tag, bổ sung để được như hình dưới.
1 2 3 | <!--<body onLoad="init()" >--> |
Bước 4: Ngay sau tag, thêm đoạn code sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!--<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!<br /><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 bang 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ó nhì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.
No comments: