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:



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

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


Support gì thì cứ để lại comment @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

4 nhận xét:

  1. mấy hôm nay không đăng bài mới hả cậu

    ReplyDelete
    Replies
    1. Vẫn đăng bài Bác à ..nhưng hơi tiết kiếm 3 ngày với viết 1 bài :) |||| thời gian hạn hẹp quá :(

      Delete
    2. em thì rảnh mà nhác viết kinh khủng, cứ gõ được vài chữ là lại thôi

      Delete
    3. Cố găng viết để kiếm 1 con GÀ nuôi với mọi người :) .... Bác có rùi viết chi nữa cho khổ thân =))

      Delete