RSS Posts 
[FD's BlOg] - Trong code CSS các bạn thường dùng ảnh làm background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong bộ đệm (cache) trên máy ngay từ đầu, mà khi nào sử dụng đến thì nó mới được tải về. Chính vì vậy đôi khi nó sẽ sinh ra độ trễ khi lần đầu tiên các bạn vào blog. Bài viết này mình sẽ hướng dẫn các bạn khắc phục điều này.Việc này cũng xảy ra ở blog của mình, và vấn đề này bạn Ngân (blogtruyen.com) trước kia đã có hỏi mình, nhưng mình chưa trả lời được, nay mới tìm ra cách giải quyết nó.
Mình sẽ lấy ngay ví dụ trong blog của mình. Các bạn để ý là nút Readmore ở mỗi bài viết của mình, nó được sử dụng 2 ảnh, 1 ảnh là hiển thị ngay từ ban đầu, còn ảnh thứ 2 là khi ta rê chuột nó mới hiển thị (hover). Khi bạn vào blog của mình, lúc đang load dữ liệu của blog, nếu các bạn rê chuột và nút Readmore, thì nó sẽ không hiển thị gì hết, tức là khi rê chuột vào ta có cảm giác ảnh 1 bị biến mất. Thực ra là do ảnh thứ 2 chưa được load, vì thế nó sẽ không hiển thị gì cả khi ta rê chuột vào. Đợi khoảng vài giây sau (không nhất thiết phải load hết blog) thì ta rê chuột vào mới thấy được ảnh thứ 2. Và thời gian này nhanh hay chậm tùy thuộc vào tốc độ đường truyền của bạn.
Bên dưới là ảnh mình họa cho các bạn thấy điều này:
Khi blog load chưa xong:
Khi blog đã load gần xong
Để khắc phục điều đó chúng ta có một thủ thuật nhỏ như sau, đó là cho phép các ảnh này được load trước, khi đó sẽ không xuất độ trễ giữa 2 ảnh 1 và 2 (như ví dụ đưa ở trên).
☼ Để thực hiện các bước như bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. và chèn đoạn code CSS bên dưới vào sau dòng <head> hoặc trước dòng </head>
<style type="text/css">
#preLoadImages {
width: 0px;
height: 0px;
background: url(Link ảnh 1.gif);
background: url(Link anh 2.gif);
background: url(Link anh 3.gif);
}
</style>
- Với các link ảnh 1, link ảnh 2, link ảnh 3, ... là các ảnh sẽ được load trước. Và bạn có thể thêm bao nhiêu vào tùy bạn.
4. Tiếp tục xuống dưới, tìm tới thẻ <body> , và chèn đoạn code màu đỏ vào ngay sau nó, như bên dưới:
<body>
<div id="preLoadImages"></div>
Với việc thêm đoạn thẻ <div id="prLoadImages"> trên vào ngay dưới thẻ <body> của blog 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. Như thế vấn đề của chúng ta được khắc phục.
5. Save template.
Theo CSSYeah
Chúc các bạn thành công.
bóc tem nà,tính đi ngủ,ghé thăm fandung tì ai ngờ có bài mới.:D
tính đăng hồi nãy roài, nhưng bận công chuyện nên giờ nì mới đăng, :D
thủ thuật này khéo qá, ngắn mà rất hay
hê hê... thanks bạn... bên blog tớ cho giảm tối đa dung lượng ảnh :D load lâu là mấy thằng logo ... :D về áp dụng thôi hê
Hay quá :D , Thế có dùng để load trước một thành phần nào đó hay một file js nào đó đc không ?????
Trong phương pháp này thì ta chỉ thực hiện cho ảnh thôi Ngân à.
Mình đã thực hiện theo hướng dẫn của bạn nhưng vẫn bị "trễ",đưa chuột đến nút Menu thì 1 vài giây sau mới load "hình thay thế" về.Mong bạn hướng dẫn thêm.Cảm ơn bạn nhiều.
cho em hỏi , nếu chỉ dùng thẻ này (div id="preLoadImages"(/div) thì ảnh trên forum có được load trước ko? (thay () bằng {} )
có load duoc swf không anh
» Nội dung phải liên quan tới chủ đề bài viết.
»
[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.