Html 5 มีความสามารถในการแสดง video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว ซึ่งช่วยโหลดรูปมาเก็บไว้เท่านั้นอาจจะไม่เพียงพอ เพราะไฟล์วิดีโอใหญ่ ๆ หรือไฟล์เพลงยังโหลดมาไม่ครบ การแสดงผลออกมาจึงไม่สมบูรณ์ตามที่ออกแบบไว้ได้ เครื่องมือที่แนะนำวันนี้คือ jQuery.html5Loader โหลดได้ที่ Gianluca Guarini
demo.html
<!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
<?php
/*
http://php.net/manual/en/function.readdir.php
Xhtml.co.il 01-Jun-2011 02:31
*/
/*
http://en.wikipedia.org/wiki/Internet_media_type#List_of_common_media_types
http://diveintohtml5.info/video.html
http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats
*/
$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 แทน