<tip id='1244' />

Tải trước ảnh cho website

Kỹ thuật tải ảnh trước (image preloading) làm cải thiện hiện hiệu năng website và tăng trải nghiệm người dùng trên website của bạn. Nó rất thích hợp khi website của bạn sử dụng nhiều hình ảnh mà bạn lại không muốn người dùng phải chờ đợi quá lâu. Dưới đây là một số cách để thực hiện kỹ thuật này:

Sử dụng HTML và CSS

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}
<div id="preloaded-images">
   <img src="images/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="images/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="images/image-03.png" width="1" height="1" alt="Image 03" />
</div>

Sử dụng Javascript

Cách 1

<script type="text/javascript">
			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();

				img1.src = "images/image-001.gif";
				img2.src = "images/image-002.gif";
				img3.src = "images/image-003.gif";
			}
	</script>

Cách 2

<script type="text/javascript">
			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(
				"images/image-001.jpg",
				"images/image-002.jpg",
				"images/image-003.jpg"
			)
	</script>

Cách 3

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "images/image-001.gif";
		img2.src = "images/image-002.gif";
		img3.src = "images/image-003.gif";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);
Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!