Loading post navigation ...
 
 

Pro page

22
Nhận xét

Tạo hiệu ứng "Loading..." cho BlOg - cực kì đơn giản

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả


[FD's BlOg] - Mình đã từng biết tới vài thủ thuật tạo hiệu ứng loading cho web(blog), với javascript, và nó hơi phức tạp một chút, có thể sẽ làm blog của bạn chậm. Nhưng với thủ thuật này bạn sẽ không lo về điều đó.



Xem hình mình họa:


Tuy thủ thuật có sử dụng javascript, nhưng nó chỉ gói gọn trong có 3 câu lệnh. Thủ thuật này ứng dụng hình động để tạo hiệu ứng. do đó để thực hiện thủ thuật nhỏ này bạn phải có một tấm hình động, có thể tham khảo các hình bên dưới:







Đầu tiên, bạn vào bảng điều khiển » vào bố cục » vào chỉnh sửa code HTML, và chèn đọan code javascript bên dưới vào lên trên dòng </head>

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>


Save template lại.

Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:

<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right">
Đang tải...<br/>
<img src="link ảnh"/></div>

- chú ý:
+ top:50px;right:200px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.
+ link ảnh : link ảnh động, tương tự ảnh mình đưa. Ta nên chọn các hình động có nền trong suốt.
+ position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh : position:absolute;

Chúc các bạn thành công.


Enter your mail address:

22

Naruto_thf90

không được rồi anh ơi :D

fandung

@Naruto_thf90:cái này anh test rồi anh mới up bài lên đó.

Được hết mà em. :D

Anh thấy bên blog của em nó cũng hiển thị mà

Ngankvn ®

Hay quá , Phải thực hiện ngay thôi :D

Nhưng mà Blog của FanDung bây giờ mình load trong tình trang mạng tốt phải tới hơn 3 phút một bài @@ , Phải khoá ko cho chạy Script thì mới load đc bình thường , Nhưng làm thế thì xem đc nhưng ... Không comments đc !!! Dũng xem lại đi nhé , Theo mình nghĩ thì nên để sidebar bên phải để phần bài viết đc load trước !!!

fandung-tester

mình đã điều chỉnh 1 phần rồi, phần bài viết mình đã ưu tiên cho nó load trước, nhưng còn sidebar, sidebar mình cũng đã bỏ bớt javascript rồi, hịên chỉ còn 3 script ở sidebar.

Bên của Ngân load bài viết của blog mình tới 3phút lận sao, lâu dữ vậy à...

Nhức đầu ghê :(

Ngankvn ®

Ưu Tiên gì đâu ??? Thấy load xong hoàn toàn Banner và Sidebar thì mới tới Phàn bài viết !!!!

À mà cái Hình loading ở giữa ấy ,Mình thích nó !! Nhưng sao nhìn thì nhỏ mà file ảnh lại tới hơn 300px mỗi chiều thế ??? Sửa lại cho mình đc ko :D , Vì theo mình biết trên IE6 ko có hiệu ứng trong suốt - Nên nếu xài hình đó sẽ che mất một phần Blog !!!

Ngankvn ®

À thêm nữa , Dũng code sai rồi nen Naruto_thf90 mới ko làm đc . Phải là :

<img src="http://search.nj.com/media/images/loading.gif"/></div>

Chứ ko phải là :

%lt;img src="link ảnh"/>%lt;/div>


Đồng thời , sao Load xong cái hình vẫn ko chịu mất đi ???

fandung

@Ngân : thì mình nói phần main post thôi. chứ không phải nói cả trang. hồi trước mình để mấy cái script trước bài viết nên nó mới load chậm, nay có đổi lại, nhưng sidebar không sửa bao nhiêu.

Còn về bài viết: không biết sao chứ bên mình load xong hình tự động mất mà. test rồi mình mới đưa lên bài viết đó chứ, không hiêu sao bên mọi người nó ko mất hình ta.

Còn cái code trong bài viết, đúng là mình sơ xuất quá , thanks Ngân đã nhắc nhở. Do đọan code ngắn nên tự mã hóa , dẫn đến sơ xuất. :D

fandung

à thêm nữa, đây là hình gif động, được tạo từ nhiều frame, nên mình không thể sửa kích thước của hình, nếu sửa thì sẽ mất hiệu ứng động

Ngankvn ®

Tức nhỉ ??/ Chả biết kỵ với code gì mà cái hình cứ ở đó mãi !!!

Ngankvn ®

À Mà bỏ mớ file lưu ở Google Page ra khỏi temp đi , Mấy cái đó Die rồi , nên trình duyệt tốn một dống thời gian để load nó - Load trang không lâu mới lạ đó !!!
http://vo1984.googlepages.com/dropdown2.js , http://vietwebguide.googlepages.com/LDP08-06-11-01.png ,

...v....v...v.v.v.vv.

fandung

Không được rồi Ngân ơi, đổi sidebar qua trái nó vẫn load sidebar trước, tại trong code HTML của template code của sidebar nó nằm trước phần main post, nên nó load trước.

Nếu muốn cho sidebar load trước phải di chuyển tòan bộ code của sidebar ra sau phần main post. ko biết có nên thử không.

fandung

đã điều chỉnh cho bài viết load trước rồi Ngân à. :D

Ngankvn ®

Hay quá !! Chỉ mình đi :)

Vì thực ra mình chỉ biết duy nhất một cách để hiện bài viết trước đó là " để phần Main ở trước trong Temp" thôi - Vì vậy phần Bài viết bên mình chỉ load trước sidebar bên phải thôi :D

fandung

thì mình cũng làm cách này mà, di chuyển tòan bộ phần main post lên trước các section khác thì nó sẽ load trước.

- đừng chọn chế độ "Mở rộng tiện ích" Ngân sẽ thấy bố cục rõ ràng rồi move nó lên trên thôi

Mà mình thấy blog của Ngân load tốt mà.

Ngankvn ®

:D Load tốt là do cái sidebar bên trái rất nhẹ !! Chứ nó vẫn load cái LeftSidebar trước !!!

Ngankvn ®

HIc mình có tới hai Sidebar nên ko làm đc rồi :( , Vì nếu để Main Wrapper lên đầu thì nó sẽ nằm bên trái , chỉnh float:right thì nó lại sang phải chứ ko cách nào cho nó nằm giữa hai sidebar :((

fandung

uh đúng rồi, quên nữa template của bạn tới 3 cột, nên nếu đặt code main post lên trước thì không được.

Thôi vậy cũng đc rồi, :D

Anonymous from hell

2 ông này nói chuyện với nhau lâu gớm ! Cứ như chat yahoo ý :))

fandung

^^ , giao lưu học hỏi mà :D

TRIỆU ĐÌNH PHÚC

Load xong hình còn nguyên vẹn, hic hic sao kì thí bác Dũng ui, bên e mà làm là hình ko mất đi sau khi load xong :((

Khách (ẩn danh)

Ngân có thể chỉ mình cách load từng ảnh ( từ trên xuống dưới) giống như site đọc truyện của cậu được hok ?

tư vấn mua bán máy tính

anh hai ơi!dùng từ chuyên môn quá em hổng hiểu gì hết đó,"vào bảng điều khiển » vào bố cục » vào chỉnh sửa code html, và chèn đọan code javascript bên dưới vào lên trên dòng ."
cái này vào sao? em không biết vào đâu hết.còn cái dưới
Sau đó tạo một widget .html/Javascript » rồi dán đọan code bên dưới vào:
cũng khó hiểu quá đi,
em làm blog 360 plus có trơi cái này được khoog vậy?



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home