recalcul Force de $ (...) css ("background-image") sur reload stylesheet lié

Question

(je ne besoin d'une fonctionnalité dans Chrome)

Contexte:.
Je hacking ensemble un Node.js script qui surveille automatiquement les fichiers qu'il sert pour les modifications, puis utilise une connexion websocket pour envoyer un message à une page de contrôle dans le navigateur qui gère le rechargement des ressources. Par exemple, si une page html a un <img href="foo.jpg" />, le serveur va regarder le jpg et envoyer un message à la page que "foo.jpg" a changé. À ce stade, j'utilise javascript pour recharger recharger l'image (src = src + "? Cachbust = 00002", ou quelque chose comme ça). Lorsqu'une image d'arrière-plan change, je parcours les éléments de la page pour trouver des références à l'image et la réinitialise avec une nouvelle chaîne de requête pour la recharger. Pour ce faire, j'utilise la solution $(...).css("background-image", ...) de jquery. Cela fonctionne, mais quand je change par la suite la valeur de l'URL dans le css (ie: background: url (foo.jpg); => background: url (bar.jpg)), la valeur background-img ne change pas .

Pour les modifications CSS, mon script recharge la feuille de style liée. Mon soupçon est que la valeur que j'ai assignée via javascript a préséance sur la valeur de la règle css dans la feuille de style liée et un attribut de style en ligne.

Question:
Y at-il de toute façon à forcer Chrome à recalculer et appliquer la valeur de la feuille de style externe et d'appliquer à des éléments qui ont eu des styles assignés par la fonctionnalité de jquery $(...).css("...","...")?

Merci à tous.

Answer 1

Pour les modifications CSS, mon script recharge la feuille de style liée. Mon soupçon est que la valeur que j'ai assignée via javascript a préséance sur la valeur de la règle css dans la feuille de style liée et un attribut de style en ligne.

C'est exactement ça. Définir CSS via jQuery comme cela a le même effet que de mettre un attribut "style" sur un élément (ce qui en fait fait). Cela remplace quelque chose ramassé via sélecteur dans le CSS.

Vous devriez pouvoir non définir le style local sur les éléments avec

$(...).css("background-image", ""); 

Answer 2

En général, si vous voulez changer/recharger une image d'arrière-plan sur un événement, essayez l'intégration d'une durée ou un autre élément à l'intérieur l'élément principal, et définir une image de fond sur ce point. Vous pouvez ensuite remplacer cet élément sans avoir à recharger une feuille de style entière. Quelque chose comme ceci:

<div class="content-element"> 
    <span class="bg-image-element" style="background-image: url('old.png')"></span> 
    <!-- .... other stuff .... --> 
</div> 

<script> 
    $('.some-element').someEvent(function() { 
     $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span> 
    }); 
</script> 

Je ne l'ai pas vu un comportement cohérent lors d'un changement juste le css background-image via javascript/jQuery fonctionne. Mais remplacer un élément entier semble forcer un rechargement d'image d'arrière-plan.