Hiệu ứng chờ tải trang (preload) cho blogspot

21 tháng 8
Tips
Mục lục
Bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước. Hiểu theo cách đơn giản sẽ sử dụng hiệu ứng chờ tải trang làm che đi tất cả phần hiển thị trang web và chờ cho trang tải xong hiệu ứng sẽ tự động ẩn đi.

Hiệu ứng chờ tải trang (preload) cho blogspot

Bài này mình sẽ sử dụng code CSS + HTML để trang không phải tải ảnh gif cho nhẹ, cách thực hiện như sau:

Hiệu ứng chờ tải trang (preload) cho blogspot

Code CSS
Code này các bạn đặt trên thẻ ]]></b:skin> hoặc trong thẻ chứa CSS của blog bạn.
#af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.af-sp{width:42px;height:42px;clear:both;margin:20px auto}
.af-sp-wave{border-radius:50%;position:relative;opacity:1}
.af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}

Code HTML
Code này chèn dưới thẻ <body>
<div id='af-preloader'>
  <div class='af-preloader-wrap'>
    <div class='af-sp af-sp-wave'></div>
  </div>
</div>

Code Script
Phần này có thể sử dụng javascript hoặc jquery nếu trong theme đã có thư viện link jquery và chèn code trước thẻ đóng &lt/body&gt
<script>//<![CDATA[
window.addEventListener('load', function() {
  // document.querySelector('#af-preloader').style.display = 'none'
  document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
  $('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>

OK chỉ vài bước coppy code đơn giản vậy thôi là các bạn có thể tự tạo một hiệu ứng chờ tải trang (preload) cho blogspot của mình rồi. Chúc các bạn thành công!

Tăng tương tác MXH

Like, sub, view, comment, share livestream…

  • Instagram, TikTok, YouTube, Twitter, Shopee
  • Dịch vụ nhanh – ổn định

🎁 Mã giảm giá: đang cập nhật

Khám phá

Tài khoản Premium

CapCut, Canva, ChatGPT, Semrush, HMA, Google Ads…

  • Kích hoạt nhanh – bảo hành rõ
  • Đa dạng gói

🎁 Mã giảm giá: đang cập nhật

Mua ngay

Template Blogspot

Thiết kế chuẩn SEO, tối ưu tốc độ & giao diện.

  • Nhiều mẫu cho blog, shop
  • Tùy biến dễ

🎁 Mã giảm giá: anhtrainang (-10%)

Xem mẫu
Tags: Blogger Blogspot Tips
Chia sẻ:
DMCA.com Protection Status
Đã sao chép link!

Bài viết liên quan

Nhận xét (7)

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

👉 Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
👉 Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
👉 Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu ✅
Hiển thị

Đăng nhận xét