ปรีโหลดรูปภาพ

เวลาทำงานกับรูปภาพ ปัญหาที่เจอบ่อยก็คือ รูปโหลดไม่ทันเห็นเป็นหน้า เว้าๆ แหว่งๆ วิธีแก้คือการทำ preload เอารูปมาเก็บเอาไว้ใน แคช (cache) ก่อนเวลาใช้จะได้มีทันใช้

function loadImages(sources)
{
	images = {};
	var loadedImages = 0;
	var numImages = 0;
	/* get num of sources */
	for(var src in sources)
	{
		numImages++;
	}
	for(var src in sources)
	{
		images[src] = new Image();
		images[src].onload = function()
		{
			if(++loadedImages >= numImages)
			{
				/* ทำงานได้แล้ว  ใส่ function ต่อไปตรงนี้ */
				return images;
			}
		};
		images[src].src = sources[src];
	}
}

var sources = {
	darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
	yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg',
};

images = loadImages(sources);

• ถ้าใช้ jQuery อ่าน Basic image gallery