Bài viết hướng dẫn JavaScript này chỉ bạn cách sử dụng CSS, JavaScript, AJAX cũng như kết hợp chúng để tải về trước các hình ảnh trên trang web một cách thông minh hơn, nhằm rút ngắn thời gian chờ đợi đối với khách ghé thăm. Các chỉ dẫn khá chi tiết, đầy đủ cũng như dễ dàng làm theo, vui lòng vào trang chi tiết để xem thêm.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

Method 2: Preloading with JavaScript Only

As effective as the previous method happens to be, I generally find it to be too tedious and time-consuming to actually implement. Instead, I generally prefer to preload images using a straight-up slice of JavaScript. Here are a couple of JavaScript-only preloading methods that work beautifully in virtually every modern browser..

JavaScript Method #1

Unobtrusive, gracefully degrading, and easy to implement, simply edit/add the image paths/names as needed - no other editing required:

<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(
				"http://domain.tld/gallery/image-001.jpg",
				"http://domain.tld/gallery/image-002.jpg",
				"http://domain.tld/gallery/image-003.jpg"
			)
		//--><!]]>

	</script>
</div>

This method is especially convenient for preloading large numbers of images. On one of my gallery sites, I use this technique to preload almost 50 images. By including this script on the login page as well as internal money pages, most of the gallery images are preloaded by the time the user enters their login credentials. Nice.

JavaScript Method #2

Here's another similar method that uses unobtrusive JavaScript to preload any number of images. Simply include the following script into any of your web pages and edit according to the proceeding instructions:

<div class="hidden">

	<script type="text/javascript">
		<!--//--><![CDATA[//><!--

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

				img1.src = "http://domain.tld/path/to/image-001.gif";
				img2.src = "http://domain.tld/path/to/image-002.gif";
				img3.src = "http://domain.tld/path/to/image-003.gif";
			}

		//--><!]]>
	</script>
</div>

As you can see, each preloaded image requires a variable definition, "img1 = new Image();", as well as a source declaration, "img3.src = "../path/to/image-003.gif";". By replicating the pattern, you can preload as many images as necessary. Hopefully this is clear - if not, please leave a comment and someone will try to help you out.

We can even improve this method a bit by delaying preloading until after the page loads. To do this, we simply wrap the script in a function and use addLoadEvent() to make it work:

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

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/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);

Ahhh, the joys of JavaScript!

Method 3: Preloading with Ajax

As if all of that weren't cool enough, here is a way to preload images using Of Geeks and letters, and uses the DOM to preload not only images, but CSS, JavaScript, and just about anything else. The main benefit of using Ajax over straight JavaScript is that JavaScript and CSS files can be preloaded without their contents affecting the current page. For images this is not really an issue, but the method is clean and effective nonetheless.

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};

As is, this code will preload three files: "preload.js", "preload.css", and "preload.png". A timeout of 1000ms is also set to prevent the script from hanging and causing issues with normal page functionality.

To wrap things up, let's look at how this preloading session would look written in plain JavaScript:

window.onload = function() {

	setTimeout(function() {

		// reference to <head>
		var head = document.getElementsByTagName('head')[0];

		// a new CSS
		var css = document.createElement('link');
		css.type = "text/css";
		css.rel  = "stylesheet";
		css.href = "http://domain.tld/preload.css";

		// a new JS
		var js  = document.createElement("script");
		js.type = "text/javascript";
		js.src  = "http://domain.tld/preload.js";

		// preload JS and CSS
		head.appendChild(css);
		head.appendChild(js);

		// preload image
		new Image().src = "http://domain.tld/preload.png";

	}, 1000);

};

Here we are preloading our three files upon page load by creating three elements via the DOM. As mentioned in the original article, this method is inferior to the Ajax method in cases where the preloaded file contents should not be applied to the loading page.

Know some triks?

I love these preloading tricks so much, I could just squeeze something. If you know of any good preloading tricks, including any improvements to the techniques shared here, kick start my heart with your wise words of preloading wisdom ;)

• Mã nguồn
• In

• Lời bình (2)
• Viết

bởi Virus Protection, 12/08/2010 09:08 PM
JPEG instead of PNG Phản hồi

Hey,
Wouldn't it be a way better solutoin to use JPEG images instead of PNG (as used in your example)? Of couse, the one might not outrule the other, but most visitors and sites and running with such fast internet connections that they could easily download/upload JPEG images. Anyway, a neat JavaScript guide.

bởi grazdesigns, 13/12/2010 12:12 AM
Ehh Phản hồi

Super neat Ajax preloadage, I will most likely use it on my portfolio.

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới