Tạo hiệu ứng page loading cho trang web

Dưới đây là hướng dẫn các bạn dùng 1 javascript để hiện thong 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.

<!--
<body onLoad="init()" >
-->

Bước 4: Ngay sau tag, thêm đoạn code sau:

<!--
<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:

Tạo hiệu ứng page loading cho trang web

  • 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.

Kết luận: Vậy là chúng ta đã tìm hiểu được cách sử dụng một js hay bạn có thể tham khảo thêm ở đây: Dùng một số javascript hay.

VN:F [1.9.22_1171]
Rating: 6.3/10 (6 votes cast)
Tạo hiệu ứng page loading cho trang web, 6.3 out of 10 based on 6 ratings
Share This