Preload hover Image

Hôm nay mình nhận được một task từ lead yêu cầu fix lại cái lỗi vướng vướng : rê chuột hover qua menu thì một vài s sau ảnh –hover mới load được, quá lâu, k đạt yêu cầu, “phải fix gấp”.

Thật ra lỗi này mình cũng đã nghĩ tới rầu, nhưng lu bu lại quên mất, test ở localhost thì ảnh hover load nhanh quá tớ chả nhận ra có chi chậm chạp ko nữa

Khi thực hiện cài đặt hover menu, mình cài đặt bằng cách tạo list các link dạng:

<a href="link.php"><img src="anh1.gif" ref="anh1-hover.gif" /> </a>

Trong đó anh1.gif là ảnh được load trong DOM còn ảnh trong ref thì không, khi sẩy ra sự kiện hover của link, mình sẽ load ảnh trong ref bằng cách dùng jQuery bóc tách attribute này ra để lấy link ảnh, sau đó swap 2 giá trị src và ref với nhau, khi đổi chỗ vậy thì anh1-hover.gif sẽ được load lên, thay thế cho anh1.gif, vậy là thực hiện được hover.

Đến đây có vẻ đã xong, tuy nhiên, như đầu bài mình nói, bị lead chê vì load anh1-hover.gif sẽ trể một khoản thời gian, khách hàng thích rê mô nhảy đó thôi.

Vậy vấn đề là anh1-hover.gif nó ko load khi ta tải trang, vậy làm sao đó cho nó load ngay trong DOM thì thôi. Sau khi tham khảo trên internet, có khá nhiều giải pháp, nhiều nhất là dùng jQuery để preload image, nhưng mình thấy nó “thụ động” sao đấy. Chỉ đơn giản là muốn load mấy cái ảnh đó trước thôi mà

Giải pháp của mình là load trước các ảnh đó ngay trong DOM, nhưng không hiển thị nó ra, bằng cách đặt các ảnh đó vào một region được đặt thuộc tính ẩn, vậy là ảnh vẫn được load và cache lại, khi rê chuột vào là nó lòi ra tức khắc

<div class=”hide”>
	<img src=”anh1-hover.gif” />
	<img src=”anh2-hover.gif” /> …
</div>

.hide{
	display:none;
}

 

 

Vấn đề này là vấn đề cơ bản mà bất cứ webdev nào cũng phải biết rồi, riêng mình hôm nay mới suy nghĩ và cài đặt thực sự, chút kinh nghiệm chia sẽ với những người chưa biết, và mong feedback từ những người đã biết.

Have a nice day !!!