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

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

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

พิชญ์ พันธุ์สนิท administrator

1 Comment so far

jQuery.html5Loader « PlusMagic's BlogPosted on8:32 pm - ม.ค. 28, 2013

[…] video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว […]

Leave a Reply