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

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

ToiDICodeDao 07:05 4 Bình luận
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 @!
Share:

Bài viết liên quan

Thảo luận

Mộc
lúc 07:59 27 tháng 10, 2015

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

Hoàng Nhân Khôi
lúc 08:37 27 tháng 10, 2015

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á :(

Mộc
lúc 09:03 27 tháng 10, 2015

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

Hoàng Nhân Khôi
lúc 20:50 27 tháng 10, 2015

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 =))