09/10/2018, 23:38
Xin chỉ cách làm loading (đang tải) cách nào
Chào các bạn, mình có thắc mắc là muốn làm cái hình loading - chờ đợi tải xuống như kiểu trang tuổi trẻ và trang quangcaosanpham họ làm bằng cách nào?
Mình có làm bằng cách bỏ hình vào <DIV> rồi khi nào xong thì mình giấu cái <DIV> đó đi nhưng thỉnh thoảng nó chạy nhảy tùm lum hết. Ai biết cách làm cái đó xin chỉ dùm.
Cảm ơn nhiều.
Mình có làm bằng cách bỏ hình vào <DIV> rồi khi nào xong thì mình giấu cái <DIV> đó đi nhưng thỉnh thoảng nó chạy nhảy tùm lum hết. Ai biết cách làm cái đó xin chỉ dùm.
Cảm ơn nhiều.
Bài liên quan
Không biết có được không? mình sẽ thử cách bạn nói xem sao?
Còn bạn nào có cách nào khác nữa không?
Thân !
Khonglongbeo bị ngắn lưỡi hay sao mà phát âm mấy chữ Javascript, client side không được và dùng nhiều term bằng tiếng việt mà tui không hiểu là cái gì. Nhưng cám ơn ông bạn đã có video cho xem!
-------------------------------------------------------------
<SCRIPT type=text/javascript>
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</SCRIPT>
<STYLE type=text/css>
#interface1 {Z-INDEX: 1}
#loader_container {WIDTH: 100%; POSITION: absolute; TOP: 40%; TEXT-ALIGN: center}
#loader {BORDER-RIGHT: #6a6a6a 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #6a6a6a 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 11px; Z-INDEX: 2; PADDING-BOTTOM: 16px; MARGIN: 0px auto; BORDER-LEFT: #6a6a6a 1px solid; WIDTH: 130px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #6a6a6a 1px solid; FONT-FAMILY: Tahoma, Helvetica, sans; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left}
#progress {FONT-SIZE: 1px; LEFT: 0px; WIDTH: 1px; POSITION: relative; TOP: 1px; HEIGHT: 5px; BACKGROUND-COLOR: #7B79C7}
#loader_bg {FONT-SIZE: 1px; LEFT: 8px; WIDTH: 113px; POSITION: relative; TOP: 8px; HEIGHT: 7px; BACKGROUND-COLOR: #ebebe4}
</STYLE>
<DIV id=loader_container>
<DIV id=loader>
<DIV align=center id=contentload>Please wait...</DIV>
<DIV id=loader_bg>
<DIV id=progress></DIV></DIV></DIV></DIV>
<DIV id=interface1 style="DISPLAY: inline; VISIBILITY: visible">
<DIV style="LEFT: 1px; VISIBILITY: hidden; POSITION: absolute; TOP: 1px"></DIV>
<DIV style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px">
</DIV>
---------------------------------------------------------------------
Hiện tại thì mình chỉ biết dùng javascript và <DIV> nhưng kết quả không được như ý mình muốn. Đang tìm hiểu thì được biết Ajax là solution cho vấn đề này. Cũng dùng javascript và <DIV> và Ajax có thêm :
- Onreadystatechange với readystate==4 và status==200 là cái mình đang muốn thử.
Mong các bạn góp ý thêm hoặc có code gửi lên đây thì more than welcome!
Giải pháp tốt nhất cho you có lẽ là search trên google mấy cái control có sẵn có lẽ phù hợp với you hơn đấy !
À, cái Ajax ở trên mà you bảo góp ý thì tui cũng chả tiếc mà nói rằng. Nó không hiệu quả đâu, đặc biệt là khi dùng ở các browser khác nhau ! cụ thể, IE nó trả về reponseText với kiểu khác, trong khi FF nó lại trả kiểu khác. Nội you xử lí cái vụ này không thôi cũng đủ để you phờ râu rồi. Nếu muốn thì nên dùng tìm hiểu và dùng Callback thì tốt hơn ! Tạo luôn control từ class cho nó sinh ra, lúc đó phát sinh thêm biến cố mỗi lần control nó load. Lúc này mới quay lại xử lí cái vụ hiệu ứng tải các hình, text,... Còn cụ thể thế nào, thi thôi, tui chả dám nói, kẻo lại bị bảo là ... ngắn cái gì nữa thì khổ.