Html 5 มีความสามารถในการแสดง video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว ซึ่งช่วยโหลดรูปมาเก็บไว้เท่านั้นอาจจะไม่เพียงพอ เพราะไฟล์วิดีโอใหญ่ ๆ หรือไฟล์เพลงยังโหลดมาไม่ครบ การแสดงผลออกมาจึงไม่สมบูรณ์ตามที่ออกแบบไว้ได้ เครื่องมือที่แนะนำวันนี้คือ jQuery.html5Loader โหลดได้ที่ Gianluca Guarini
demo.html
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 32 33 34 35 36 37 38 39 40 | <!doctype html><html><head><meta charset="utf-8"><title>preload jQuery.html5loader</title><style>#preload { background: #000; height: 99%; opacity: 0.5; width: 99%; z-index: 100;}</style></head><body><div id="preload"></div><script src="assets/jQuery/jquery.min.js"></script><script src="assets/jquery/jQuery.html5loader/js/animations/jQuery.html5Loader.circular.js"></script><script src="assets/jQuery/jQuery.html5loader/js/jQuery.html5Loader.min.js"></script><script>var images ={};var loaderAnimation = $('#preload').LoaderAnimation({ glowColor:"#f0f0f0", lineWidth:10, color:"#cccccc"});$.html5Loader({ getFilesToLoadJSON:'preloadHtml5loader.json', onComplete:function() { alert('onComplete'); $('#preload').remove(); }, onUpdate: loaderAnimation.update});</script></body></html> |
โดย JavaScript จะอ่านข้อมูลที่ต้องโหลดมาจากข้อมูล json ในไฟล์ preloadHtml5loader.json ผมทำไฟล์ PHP ช่วย generate ไว้ให้แล้ว
generator.php
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <?php/*Xhtml.co.il 01-Jun-2011 02:31*//**/$extensionType['AUDIO'] = array('aiff', 'au', 'flac', 'l16', 'm4a', 'm4b', 'm4p', 'm4rand', 'm4v', 'mp3', 'oga', 'ogg', 'ogv', 'ogx', 'opus', 'pcm', 'ra', 'ram', 'spx', 'wav', 'wave', 'webm');$extensionType['IMAGE'] = array('gif', 'ico', 'jfi', 'jfif', 'jif', 'jpe', 'jpeg', 'jpg', 'png', 'svg', 'svgz', 'tif', 'tiff');$extensionType['SCRIPT'] = array('js', 'json');$extensionType['TEXT'] = array('css', 'csv', 'htm', 'html', 'txt', 'xml');$extensionType['VIDEO'] = array('aac', 'dv', 'f4a', 'f4b', 'f4p', 'f4v', 'flv', 'm1a', 'm1v', 'm2a', 'm4a', 'm4b', 'm4p', 'm4r', 'm4v', 'mk3d', 'mka', 'mks', 'mkv', 'mov', 'mp1', 'mp2', 'mp4', 'mpa', 'mpeg', 'mpg', 'mpv', 'oga', 'ogv', 'ogx', 'opus', 'qt', 'spx', 'wav', 'wmv');function ReadFolderDirectory($dir = 'assets/products', $extensionType, $files){ $multiple = array(); if($handler = opendir($dir)) { $dirs = array(); while (($sub = readdir($handler)) !== FALSE) { $item = array(); if ($sub != "." && $sub != ".." && $sub != "Thumb.db" && $sub != "Thumbs.db") { if(is_file($dir."/".$sub)) { $pathParts = pathinfo($sub); $item['type'] = ''; foreach($extensionType as $group => $type) { $ext = strtolower($pathParts['extension']); if(array_search($ext, $type) !== FALSE) { $item['type'] = $group; continue; } } if($item['type'] == 'AUDIO' || $item['type'] == 'VIDEO') { $multiple[$item['type']][$pathParts['filename']][$ext]['size'] = filesize($dir."/".$sub); $multiple[$item['type']][$pathParts['filename']][$ext]['source'] = $dir.'/'.$sub; } else { $item['size'] = filesize($dir."/".$sub); $item['source'] = $dir.'/'.$sub; $files[] = $item; } } else { $files = ReadFolderDirectory($dir."/".$sub, $extensionType, $files); } } } closedir($handler); foreach($multiple as $type => $filenames) { $group = array(); $group['type'] = $type; foreach($filenames as $filename => $exts) { foreach($exts as $ext => $info) { $group['sources'][$ext]['size'] = $info['size']; $group['sources'][$ext]['source'] = $info['source']; } } $files[] = $group; } } return $files;}$files = array();$files['files'] = ReadFolderDirectory('assets/products/items', $extensionType, $files);//echo '<pre>',print_r($lists, true),'</pre>';header('Content-type: application/json; charset=utf-8');echo json_encode($files); |
Effect ที่มีสามารถเปลี่ยนได้โดยการเปลี่ยนไปเรียกไฟล์ javascript อื่นๆ ใน assets/jquery/jQuery.html5loader/js/animations แทน
About the author