Precargar carpeta de imagenes.
Hola que tal.
Vereis, estoy buscando un codigo para poder precargar una carpeta de imagenes entera.
Buscando por internet he encontrado un codigo que parece hacer lo que busco, pero dado que mis conocimientos son bastante limitados, me gustaria pediros ayuda para poder armar el codigo
El tutorial es el siguiente:
http://james.padolsey.com/javascript/preloading-images-from-a-directory/
En el explica esquematicamente los pasos a seguir, pero he intentado montarlo y no parece funcionar.
Por lo que he entendido consta de dos partes, un codigo php (que va en un archivo independiente), y un javscript que llama al php y a la precarga. pero ya os digo que no he conseguido hacerlo funcionar.
¿podria alguien echarme un cable por favor?
Muchas gracias de antemano.
Un saludo
buga
Ya esta solucionado.
Gracias Igualmente
Un saludo
buga
Bueno, he conseguido que el codigo me funcionea medias, ahora mismo se genera un array de las imagenes de un directorio. Luego las precargo con este codigo:
var p = new Image();p.src = srcArray[i];
Pero yo sigo sin ver las imagene en el cache. No se supone que ese codigo guarda imagenes en cache?
Por favor, agradeceria mucho una ayuda.
Saludos
buga
¿Alguien me puede ayudar por favor? estoy totalmente bloquedao.
Gracias
Saludos
buga
Si todo esta en el mismo directorio. De todas formas en el tutorial no especifica nada de como deben ir los archivos, solo ponen el codigo sin mas, ni siquiera explica si debe ir en el mismo html o en archivos separados. De ahi mi frustracion.
No tengo ninguna direccion online, lo estoy provando en local mediante xaamp. :(
Alguna sugerencia?
Muchas gracias
Saludos
phpninja
el index.php, y el scanImageDir.php y el directorio /images están todos en el mismo directorio?
Puedes darme una URL ? seguro que chrome escupe algun error.
buga
Por si fuera de ayuda, pongo los pasos que he seguido para intentar montar el tutorial de mi primer post.
-Un index.php con el siguiente codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">
/* JavaScript Component */
function preloadImagesFromDirectory(dir) {
if(!dir) return;
function getJSON(URL,success){
// Create new function (within global namespace)
// (With unique name):
var uniqueID = 'json'+(+(new Date()));
window[uniqueID] = function(data){
success && success(data);
};
// Append new SCRIPT element to DOM:
document.getElementsByTagName('body')[0].appendChild((function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = URL.replace('callback=?','callback=' + uniqueID);
return script;
})());
}
function preload(srcArray) {
for(var i = 0; i < srcArray.length; i++) {
(new Image()).src = srcArray[i];
}
}
// Get that JSON data:
getJSON('scanImageDirectory.php?directory=' + encodeURIComponent(dir) + '&callback=?', function(data){
return data.images ? preload( data.images ) : false;
});
}
//
// We don't want to disturb anything so we'll wait
// until everything's done loading before preloading:
window.onload = function(){
preloadImagesFromDirectory('images/');
}
</script>
</head>
<body>
</body>
</html>
-Y un php aparte (scanImageDirectory.json.php) con este otro codigo:
<?php
/* PHP file, e.g. scanImageDirectory.json.php */
// Check that a callback function has been specified:
if (!isset($_GET['callback']) || !isset($_GET['directory'])) exit;
// Use PHP5's scandir function to scan all
// of images directory:
$dirContents = scandir($_GET['directory']);
// Define function to confirm each
// filename is a valid image name/extension:
function isImageFile($src) {
return preg_match('/^.+\.(gif|png|jpe?g|bmp|tif)$/i', $src);
}
// Loop through directory files and add to
// $arrayContents on each iteration:
$arrayContents = '';
foreach($dirContents as $image) {
if (isImageFile($image)) {
$arrayContents .= !empty($arrayContents) ? ',' : '';
$arrayContents .= '"' . 'images/' . $image . '"';
}
}
// Prepate JSON(P) output
$output = $_GET['callback'] . '({\'images\':[' . $arrayContents . ']});';
// Output the output:
echo $output;
?>
Junto a estos php hay una carpeta images (con varias imagenes en su interior)
Asi es como yo he entendido el tutorial del cual pongo el enlace en mi primer post.
Pero no se si he hecho los pasos de manera correcta.
Agradeceria alguien pudiera ayudarme.
Un saludo
buga
Muchas gracias por tu interes en ayudarme.
He subido un un rar con los archivos que he montado a partir de tutorial por si alguien pudiera hecharle un vistazo para ver que hago mal.
https://rapidshare.com/files/2704839036/precarga_imagenes.rar
Los he probado con un servidor local y poarece no hacer nada. Por lo menos en el cache no aparece ninguna imagen, con lo cual deduzco que no esta funcionando.
Muchas gracias
Un saludo
phpninja
Has seguido el tutorial? que tienes hecho? donde te encallas?