คลังเก็บบล็อก

jQuery.html5Loader


Html 5 มีความสามารถในการแสดง video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว ซึ่งช่วยโหลดรูปมาเก็บไว้เท่านั้นอาจจะไม่เพียงพอ เพราะไฟล์วิดีโอใหญ่ ๆ หรือไฟล์เพลงยังโหลดมาไม่ครบ การแสดงผลออกมาจึงไม่สมบูรณ์ตามที่ออกแบบไว้ได้ เครื่องมือที่แนะนำวันนี้คือ jQuery.html5Loader โหลดได้ที่ gianlucaguarini http://www.gianlucaguarini.com/
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 แทน

โฆษณา

โหลดโปรแกรมครั้งเดียว!


สมัยก่อนไวรัสชอบติดมาจากอุปกรณ์พวกแผ่น ซีดี แฟลต์ไดร์ต่างๆ เดี่ยวนี้เน็ตเร็วขึ้น มันก็หันมาระบาดทางโปรแกรมที่ใช้ท่องเว็บต่างๆ แทน วิธีป้องกันที่ดีที่สุดคืออับเดตเวอร์ชั่นใหม่ล่าสุดมาใช้ แต่บางสถานที่ห้ามดาวน์โหลดไฟล์ เน็ตช้า ร้านเน็ตที่มีเครื่องเยอะๆ จะมาโหลดที่ละตัวคงไม่ไหว หรือเครื่องที่ไม่ได้ต่อเน็ตภายนอก
วิธีแก้ปัญหาคือโหลดมาตัวเดียวแล้วลงหลายเครื่องๆ แต่บางโปรแกรม ทำตัวติดตั้งเล็กๆ แล้วบังคับให้ลงทีละเครื่อง เสียเวลาเปลืองพลังงาน จะให้เร็วต้องใช้วิธีพิเศษ

  • IE (internet explorer) 9 รุ่นที่ดีที่สุด เร็วที่สุดในกลุ่มโปรแกรมที่คนนิยมใช้กันมากที่สุดดาวน์โหลดตัวเต็มได้ที่ http://windows.microsoft.com/en-us/internet-explorer/download/ie-9/worldwide
    http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages
  • ตัวเสริมสำหรับเล่นไฟล์มีเดียต่างๆ Adobe® Flash® Player (เล่นเว็บที่มีการเครื่อนไหว) ,Adobe® Reader® (อ่านเอกสาร pdf อ่านข้อ 3 ก่อนครับ ) ,Adobe® AIR ® (บ้านเรายังไม่นิยมไม่ต้องเลือกก็ได้) และ Adobe® Shockwave® Player (ไม่ค่อยมีใครใช้เท่าไหร่ไม่จำเป็นต้องลง) ไปที่
    หรือไปโหลดเฟรตปกติแต่คลิกลิงค์ distribution ด้านขวามือ คลิก Apply to distribute Flash Player เลือกตัวที่ต้องการ เลือก windows ก็จะได้ตัวติดตั้งตามที่เราให้ข้อมูลมา รออีเมล์ที่จะส่งลิงค์มาให้ verified คลิกที่ลิงค์ที่ส่งมา รออีเมล์อีกฉบับที่จะให้โหลดตัวติดตั้งโปรแกรม
  • Foxi reader เป็นโปรแกรมที่แนะนำให้ใช้แทน Adobe® Reader® ขนาดเล็กกว่า ทำงานเร็วกว่า ไม่หนักเครื่อง โหลดได้ที่
    http://www.foxitsoftware.com/products/reader/
  • Google chrome เป็นตัวดูเว็บที่ปลอดภัยและเร็วที่สุดตอนนี้ เอามาได้ที่
    http://www.google.com/chrome/eula.html?standalone=1 จะเล่นแฟล็ชได้เลยไม่ต้องลงเพิ่ม

โน๊ต. โปรแกรมบางตัวมีคนปล่อยลิงค์ให้ดาวน์โหลดตรงไว้แล้ว โหลดง่ายกว่าเอามาจากเว็บผู้ผลิตมาก แต่มักจะเป็นเวอร์ชั่นเก่า หรือแอบใส่ไวรัสมาด้วย

%d bloggers like this: