Thủ thuật Load ảnh trước dùng Javascript/CSS cho Blogspot

Làm thế nào để tăng tốc độ Load trang cho Blogspot? Đến hiện giờ tôi cũng chưa có đáp án cụ thể cho câu trả lời này nhưng tôi chắc chắn một đều khi bạn đọc xong bài này bạn sẽ nhận được một phần đáp án của câu hỏi trên.

Ngoài việc tối ưu kích thước và nén ảnh trước khi đăng lên, thì kỹ thuật (thủ thuật) Load ảnh trước cũng cải thiện đáng kể tốc độ tải (Load) trang Blog/Website. Khi ảnh được Load trước trong không cụ trình duyệt, người đọc có thể lướt qua trang Blog/Website của bạn nhanh chóng hơn, đồng thời độc giả cũng hình dung được nội dung Blog/Website của bạn thông qua những bức ảnh (Người dùng rất khó tính họ sẽ không đủ kiên nhẫn chờ đến khi Blog/Website Load hết nội dung).

Đọc thêm:

● Loại bỏ JavaScript và CSS chặn hiển thị của blogspot cải thiện tốc độ Load cho Blogspot

● Tạo chức năng Responsive Video chèn (nhúng) từ Youtube vào Blogspot

Kỹ thuật này đặt biệt hữu ích cho các Blog/Website lưu trữ hình ảnh. Sau đây Mình xin đưa ra 2 cách cho các bạn lựa chọn MỘT LÀ SỬ DỤNG JS, HAI LÀ SỬ DỤNG CSS. Hai thủ thuật này hoạt động như thế nào thì tôi sẽ nói rõ ở phần kết luận.

☼ Bắt đầu thủ thuật !

Cách 1: Sử dụng JS.

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <body>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <body> và Lưu mẫu lại.

<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array() 
function preload() { 
             for (i = 0; i < preload.arguments.length; i++) { 
                         images[i] = new Image() 
                         images[i].src = preload.arguments[i] 
            } 
} 
preload( 
            "Link ảnh 1", 
            "Link ảnh 2", 
            "Link ảnh 3" 
) 
//--><!]]> 
</script> 
</div>

Cách 2: Sử dụng CSS.

<div id='preLoadImages'>
<style type='text/css'>
#preLoadImages {
width: 0px;
height: 0px;
background: url(Link ảnh 1);
background: url(Link ảnh 2);
background: url(Link ảnh 3);
}
</style>
</div>

☼ Tùy chỉnh:

· Thay Link ảnh 1, Link ảnh 2, Link ảnh 3 thành link ảnh bạn muốn Load trước.

· Để thêm một hình ảnh mới bạn chỉ cần chèn đoạn, "Link ảnh n" code vào ngay trước đoạn "Link ảnh 3" (Đối với bạn nào sử dụng JS). Lưu ý: Linh ảnh đặt trong dấu ngoặc kép (") và cách nhau bởi dấy phẩy (,). Link ảnh cuối cùng không có dấu phẩy ở cuối.

· Để thêm một hình ảnh mới bạn chỉ cần chèn đoạn, "background: url(Link ảnh n);" code vào ngay sau đoạn "Link ảnh 3" (Đối với bạn nào sử dụng CSS).

☼ Kết luận: Việc thêm đoạn thẻ <div class="hidden"> (<div id="preLoadImages">) trên vào ngay dưới thẻ <body> của trang Blog/Website của bạn, khi trình duyệt đọc tới thẻ div này, nó sẽ Load trước toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt.

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

Backlink: Luận án tốt nghiệp| Luận án thạc sĩ| Luận án tiến sĩ

Support gì thì cứ để lại comment @!