Il y'a quelques mois j'ai eu besoin d'encapsuler tout mes scripts, css et images dans une seul image, puis appeler cette image avec AJAX, et extraire le tout pour l'insérer dans le document. Je ne sais pas si ça va servir mais c'est intéressant de voir que ça marche ;-)
Donc, pour le tester, créez un dossier sur un serveur, mettez tout vos scripts, css et images (vous pouvez les mettre à la racine, dans des dossiers,...etc comme vous voulez), éventuellement numérotez vos scripts 1.js, 2.js, ... etc au cas ou l'un doit être inclus avant l'autre.
Mettez dans la racine du dossier une image nommée js.png, c'est elle qui va intégrer les scripts et les css.
Mettez dans la racine du dossier ce script PHP:
Code PHP:
<? // embed images as data:image/gif;base64,... function read_from_file ($file) {
$handle = @fopen($file, "r");
$data = '';
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
$data .= $buffer;
}
fclose($handle);
}
return rtrim($data);
}
function write_to_file ($file, $data) {
$fp = fopen($file, "w");
fwrite($fp, $data);
fclose($fp);
}
function lReplace($m) {
echo " : image "$GLOBALS['dn'].'/'$m[1].'.'$m[3]." base64 encoded in"$GLOBALS['fn']."<br>";
return "data:image/gif;base64,"base64_encode(read_from_file($GLOBALS['dn'].'/'$m[1].'.'$m[3]));
}
function lParse($dirname,$file) {
$GLOBALS['dn'] = $dirname;
$GLOBALS['fn'] = $dirname"/"$file;
$path = $dirname"/"$file;
$data = read_from_file($path);
write_to_file($path,preg_replace_callback('/([^\'\(\."\s]*)(\.)(gif|jpg|bmp|png)/i',lReplace,$data));
}
function read_dir1($dirname,$i) {
$j=$i+1;
$ind="";
while($i) {$ind .= '__';$i--;}
if (is_dir($dirname))
$dir_handle = opendir($dirname);
if (!$dir_handle)
return false;
while($file = readdir($dir_handle)) {
if ($file != "." & $file != "..") {
if (!is_dir($dirname"/"$file)) {
echo $ind$dirname"/"$file"<br>";
if(preg_match('/.(\.)(css|js)/',$file)) {lParse($dirname,$file);}
}
else
read_dir1($dirname'/'$file,$j);
}
}
closedir($dir_handle);
return true;
} read_dir1('.',0);
// embed css and js in an image function store($d,$f) {
if(preg_match('/.(\.)(js)$/',$f)) $GLOBALS['data_js'] .= read_from_file($d"/"$f);
if(preg_match('/.(\.)(js)$/',$f)) $GLOBALS['data_js'] .= "\n\n";
if(preg_match('/.(\.)(css)$/',$f)) $GLOBALS['data_css'] .= read_from_file($d"/"$f);
if(preg_match('/.(\.)(css)$/',$f)) $GLOBALS['data_css'] .= "\n\n";
}
$ord = 1;
if($ord) {
function reador_dir($dirname,$i,$max) {
$j=$i+1;
$ind="";
while($i) {$ind .= '__';$i--;}
if (is_dir($dirname))
$dir_handle = opendir($dirname);
if (!$dir_handle)
return false;
while($file = readdir($dir_handle)) {
if ($file != "." & $file != "..") {
if (!is_dir($dirname"/"$file)) {
if(preg_match('/(\d){1,2}(\.)(js)$/',$file,$m) & $m[1]>$max) {$max=$m[1];}
}
else
$max = reador_dir($dirname'/'$file,$j,$max);
}
}
closedir($dir_handle);
return $max;
}
function storord($dirname,$i) {
if (is_dir($dirname))
$dir_handle = opendir($dirname);
if (!$dir_handle)
return false;
while($file = readdir($dir_handle)) {
if ($file != "." & $file != "..") {
if (!is_dir($dirname"/"$file)) {
if(preg_match("/$i(\.)(js)$/",$file)) {store($dirname,$file);echo "store($dirname/$file)<br>";}
}
else
storord($dirname'/'$file,$i);
}
}
closedir($dir_handle);
return false;
}
echo "max is "reador_dir('.',0,1)."<br>";
$i=1;
while($i<reador_dir('.',0,1)+1) {storord('.',$i); $i++;}
}
function read_dir2($dirname,$i,$ord) {
$j=$i+1;
$ind="";
while($i) {$ind .= '__';$i--;}
if (is_dir($dirname))
$dir_handle = opendir($dirname);
if (!$dir_handle)
return false;
while($file = readdir($dir_handle)) {
if ($file != "." & $file != "..") {
if (!is_dir($dirname"/"$file)) {
if(preg_match('/.(\.)(css|js)$/',$file) & !$ord) {store($dirname,$file);echo "store($dirname/$file)<br>";}
elseif(preg_match('/.(\.)(css|js)$/',$file) & !preg_match('/(\d){1,2}(\.)(css|js)$/',$file)) {store($dirname,$file);echo "store($dirname/$file)<br>";}
}
else
read_dir2($dirname'/'$file,$j,$ord);
}
}
closedir($dir_handle);
return true;
} read_dir2('.',0,$ord); write_to_file ("js.png", read_from_file("js.png")."\n[JS]"$GLOBALS['data_js']."\n[CSS]"$GLOBALS['data_css']); ?>Code JAVASCRIPT:
<script>
function get_js (url) {
var request = false;
if(windowXMLHttpRequest) {
request = new XMLHttpRequest();
if(requestoverrideMimeType) {
requestoverrideMimeType('text/xml');
}
} else if(windowActiveXObject) {
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i=0; i<versionslength; i++) {
try {
request = new ActiveXObject(versions[i]);
} catch(e) {}
}
}
xmlHttpReq = request;
xmlHttpReqopen("GET",url, false);
//xmlHttpReq.onload = load_image(xmlHttpReq.responseText);
xmlHttpReqsend(null);
return xmlHttpReqresponseText;
}
function ress(resp,type) {
var b1 = respindexOf('[JS]') + 4;
var b2 = respindexOf('[CSS]') + 5;
var delb = b2-b1-5;
if(type=="js") return respsubstr(b1,delb);
if(type=="css") return respsubstring(b2);
}
var resp = get_js('js.png','js');
var html_doc = documentgetElementsByTagName('head').item(0);
var js = documentcreateElement('script'); jstextContent = ress(resp,'js'); html_docappendChild(js);
var sty = documentcreateElement('style'); stytextContent = ress(resp,'css'); html_docappendChild(sty); </script> J'espère que j'ai été claire :-)