2011-10-27 3 views
4

En cours d'exécution de chrome 14, il ne parvient pas à afficher un graphique gif tournant sur ma page de connexion.chrome ne restitue pas gif image d'arrière-plan

Voici ce que la page ressemble en chrome:

enter image description here

Voici à quoi il ressemble à tous les autres navigateurs:

enter image description here

Reproduire:

http://trunk.test.openmile.com/login/#null

Entrez un email et un mot de passe valides et cliquez sur 'connexion', puis lorsque l'indicateur de progression apparaît, appuyez sur STOP pour que le navigateur ne puisse pas vous donner une erreur de connexion.

Notez que l'arrière-plan n'est pas affiché en chrome. Fait intéressant, si vous inspectez l'élément et ajoutez 1px à la position de l'image d'arrière-plan, l'image deviendra visible.

Ça sent le bug chrome pour moi, mais est-il une solution de contournement?

modifier: Une autre vraiment étrange chose: si je mets un alert à la fin de la fonction qui montre ce traitement div, après l'alerte, l'arrière-plan image devient visible.

Répondre

5

Je peux reproduire votre problème, mais si je déclenche manuellement la fenêtre de la console, je vois la fileuse très bien:

> OM.processing($('div.portlet.login form')); 

Alors, voici ma conjecture - votre spinner n'a pas été pré-chargé, et vous 'ouvre la fenêtre pendant que vous attendez une requête AJAX. Pour une raison quelconque, d'autres navigateurs chargeront l'image pendant que la requête AJAX est en attente, mais pas Chrome. Pour tester cela, j'ai essayé ceci dans la console:

> var img = $('<img src="http://trunk.test.openmile.com/static/9753/images/processing_black.gif">'); 

alors essayé de se connecter normalement - et j'ai vu la fileuse.

Donc je pense que si vous préchargez votre image spinner, peut-être avec le code ci-dessus, et cela devrait fonctionner correctement.

+0

Si vous voulez garder il dépend de CSS que vous pourriez vouloir utiliser ceci 'var bg = $ (ceci) .css ('background-image'); bg = bg.replace ('url (', ''). Replace (')', ''); var forceChromeToLoadImage = $ (''); 'Voir http://stackoverflow.com/questions/8809876/can-i-get-divs-background-image-url –

0

J'ai rencontré des problèmes lors de l'utilisation de la réponse de nrabinowitz.

Donc j'ai fini par inclure l'image pertinente quelque part dans la page avec 0 dimensions.

HTML:

<input class="button" id="myButton" type="submit" name="searchButton" /> 
... 

<img class="loaderHackForChrome" src="" width="0" heigh="0"> 

Javascript:

/* 
    Hack for Chrome issue with GIF bg images 
    [1] gets the bg url from the CSS 
    [2] Extract the path: by removing opening string "url(" and closing character ")" that surround it 
    [3] Sets the relevant image tag with our GIF image's path 
*/ 
$('#myButton').click(function() { 
    var bg = $(this).css('background-image'); // [1] 
    bg = bg.replace('url(','').replace(')',''); // [2] 
    $('.loaderHackForChrome').att('src', bg); // [3] 
}); 

source: http://chromespot.com/forum/google-chrome-troubleshooting/4336-background-image-doesnt-load.html

EDIT: cette question peut avoir été fixé maintenant à

Questions connexes