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

เวลาทำงานกับรูปภาพ ปัญหาที่เจอบ่อยก็คือ รูปโหลดไม่ทันเห็นเป็นหน้า เว้าๆ แหว่งๆ วิธีแก้คือการทำ preload เอารูปมาเก็บเอาไว้ใน แคช (cache) ก่อนเวลาใช้จะได้มีทันใช้
[code language=”javascript”]
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);
[/code]

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