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


เวลาทำงานกับรูปภาพ ปัญหาที่เจอบ่อยก็คือ รูปโหลดไม่ทันเห็นเป็นหน้า เว้าๆ แหว่งๆ วิธีแก้คือการทำ 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);

About plusmagic

PHP lover in thailand

Posted on 2013/01/27, in javaScript and tagged , , , , . Bookmark the permalink. 1 ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: