Bug sous chrome style.background
Salut à tous, j'ai un soucis sous Chrome, sur l'affichage dans une div de l'image, je passe par un style css avec js :
Code:
1
2
|
document.getElementById("imgLoad").style.background = "url(http://localhost:8080/cat/visage.jpg)"; |
Bref jusque la tout va bien, sauf que dans le processus de l'appli sur lequel je bosse, il y a un petit téléchargement qui s’exécute, après l'affichage de l'image.
Et donc suite à ce téléchargement, je me retrouve devant un bug que j'ai que sous chrome et pas les autres navigateurs mêmes les IE8 IE7 l'image s'affiche bien...
Alors j'ai fait mes petites recherches il s'agit d'un bug référencer
Code:
// Chrome shim to fix http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/1b6a86d6d4cb8b04/739e937fa945a921
To fix et j'ai trouvé ce bout de code en jquery :(
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function refreshBackgrounds(selector) {
// Remove this once Chrome fixes its bug.
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
$(selector).each(function() {
var $this = $(this);
if ($this.css("background-image")) {
var oldBackgroundImage = $this.css("background-image");
setTimeout(function() {
$this.css("background-image", oldBackgroundImage);
}, 1);
}
});
}
}; |
sauf que moi je suis contraint au bout vieux oldschool JS, car trop de views hits sur cette plateforme, une librairie jquery même compresser pourrait nous mettre down notre serveur de resize, on a du varniche, du memcache Exclusivement réserver pour les besoins des serveurs sous cassandra hadoop pour des calculs de stats en realtime...
Sinon j'ai refait à ma sauce le concept genre "pansement ergo" en espérant qu'il fixeront ce bug qu'il n'était pas présent sur les versions précédente, et surtout pas de cross site "tout est fait sur le même domaine".
voilà ce code qui sauve pas la vie, mais qui essaye malgré tout t'obtenir les résultats souhaités en reprenant l'idée de setTimeout et fonction anonyme du code précédent...
Code:
1
2
3
4
|
setTimeout(function() {
document.getElementById("imgLoad").style.background = "url(http://localhost:8080/cat/visage.jpg)";
}, 100); |
Simulation d'un téléchargement forcé en PHP
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function lance_telechargement(){
$fichier='http://localhost:8080/cat/visage.jpg';
$nom='visage.jpg';
$poids=strlen(file_get_contents($fichier));
// Pour un fichier distant
// $poids=filesize($fichier);
// Pour un fichier local
header('Content-Type: application/octet-stream');
header('Content-Length: '. $poids);
header('Content-disposition: attachment; filename='. $nom);
header('Pragma: no-cache');
header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
header('Expires: 0');
readfile($fichier);
exit();
}
if(@$_POST["submitcatchform"] == true){
lance_telechargement();
} |
Partie head form html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<head>
function formSubmit(){
document.catchForm.submit();
document.getElementById("submitcatchform").value = "true";
return true; //a PHP de jouer vérification de submitcatchform
};
window.onload = function(){
formSubmit();
};
</head>
<form method="post" action="#" id="catchForm" name="catchForm">
<input type="text" id="mailInput" value="test@test.com"/>
<input type="hidden" name="submitcatchform" id="submitcatchform" value="false"/>
</form> |
Le problème maintenant ce que ce pansement va bien pour des images de faible poids (4s) c'est suffisant pour des petites tailles d'images 800*600 en 72 dpi... Dès que je me retrouve au dessus et la cette ridicule image ne veux pas s'afficher...
Si vous avez une autre solution a ce problème je suis preneur, merci à vous tous.
Bonne soirée
