เวลาทำงานกับรูปภาพ ปัญหาที่เจอบ่อยก็คือ รูปโหลดไม่ทันเห็นเป็นหน้า เว้าๆ แหว่งๆ วิธีแก้คือการทำ preload เอารูปมาเก็บเอาไว้ใน แคช (cache) ก่อนเวลาใช้จะได้มีทันใช้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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 = {};images = loadImages(sources); |
- ถ้าใช้ jQuery อ่าน Basic image gallery