Discussion :

[djedje91]

Bonjour à tous,

J'ai un souci avec Imagecache et Ajax.

J'aimerais pouvoir ajouter les sources de mes images chargées en Ajax en tâche de fond et les ressortir quand j'en ai besoin.
Sans imagecache tout marche très bien, mais avec une interaction du plugin imagecache au succès de la fonction , celui-ci me ressort cette erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
XMLHttpRequest cannot load http://cs-infoinfoxxxxxxxad/1397744823185.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. index.html:1
ERROR: XHR error - Image http://cs-infoinfoxxxxxxxad/1397744823185.jpg could not be downloaded - status: 0 imgcache.js:585
ERROR: Download error source: http://cs-infoinfoxxxxxxxad/1397744823185.jpg

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
// Initialisation de imageCache.js
 
var startTest = function() {
			// see console output for debug info
			ImgCache.options.debug = true;
			ImgCache.options.usePersistentCache = true;
 
			ImgCache.init();
		};
 
		if (typeof(cordova) !== 'undefined') {
			// cordova test
			console.log('cordova start');
			document.addEventListener('deviceready', startTest, false);
		} else {
			// normal browser test
			startTest();
		} 
 
 
 // Ramener les données
$.ajax({
            type: "GET",
            url: "http://cs-infoinfoxxxxxxxad/voir_images.php?callback=?",
            dataType: 'json',
             success : function(data) {
                 var localData = JSON.stringify(data); 
                 $.each(data, function(i, item) {  
                   ImgCache.cacheFile(item.items_name);
               });
	        window.localStorage.setItem('MosaicData', localData);
            }
        });
 
 // Appelle des template 
var localData = JSON.parse(window.localStorage.getItem('MosaicData'));
 this.el.find('#mosaique').html(photoView.mosaictemplate(localData));
 
 
 // Gestion du cache
$('img').each(function() {
                     target = $(this);
                    ImgCache.isCached(target.attr('src'), function(path, success){
                         if(success){
                           // already cached
                           ImgCache.useCachedFile(target);
                           console.log(target)
                         } else {
                           // not there, need to cache the image
                           ImgCache.cacheFile(target.attr('src'), function(){
                             ImgCache.useCachedFile(target);
                           });
                         }
                       });
                   });
                });

Si vous avez une idée d'où peut venir cette erreur, je suis preneur !
Merci à tous ceux qui seront allé jusque là.
Et je précise, je suis un grand débutant.

[Bovino]

Same Origin Policy...

[djedje91]

Merci, je vois de quoi il s'agit mais je vois pas vraiment ce qu'il faut faire :s
La fonction Ajax marchait très bien avant l'ajout du plugin :s
Je chargeai les données et compilai mon template Handlebars.
La je souhaite charger les donners en ajax en retire les sources des images et les sauvegarder dans cache.

Je précise, voici mon fichier php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
header("Access-Control-Allow-Origin: *");
header('Content-type: application/json');
$files  = array();
$obj['id'];
$dir = opendir("./upload/");
while($file=readdir($dir)) {
	if($file=='.' || $file == '..') {
	continue;
	}
list($width, $height) = getimagesize("./upload/".$file);	
$files[] = array("items_name" => "http://cs-ixxxxxxxxx/".$file, "width" => $width, "height" => $height);	
}
echo $_GET[callback].'('.json_encode($files).')';
 
 
?>