[jQuery] CSS Background wordt niet geladen na wijziging*

[TheNephilim]

In een winkelmandje waar ik mee bezig ben, wil ik als men op een 'refresh' knopje klikt, de achtergrond afbeelding van het knopje wijzigen naar een geanimeerde versie. Op deze manier kan de klant zien dat de pagina bezig is met het wijzigen van het aantal van een product.

Echter, de code komt netjes in de 'inline css' te staan, maar het blijft gewoon een leeg vlak. Als ik dezelfde code in de 'element inspector' in Chrome, bij de 'inline-css' zet, werkt het wel.

http://jsfiddle.net/sEkKM/

Zoals altijd... in het exemplaar hierboven werkt het wel

---

Oorzaak gevonden!

jQuery maakt er dit van, dat klopt gewoon:

HTML:

style="background-image: url(http://tweakers.net/ext/f/ZKCHqTjEKCXlNCNTQadx2R37/full.gif); background-color: transparent; background-position: 0px 0px; background-repeat: no-repeat no-repeat;"

Als ik m'n eigen URL invoer werkt het niet, maar in de browser krijg ik gewoon het plaatje te zien. Als ik de eigen URL dan invoer in de 'element inspector' werkt het ook.

Conclusie, background-image wijzigen met een afbeelding van het huidige domein werkt niet in Chrome, Firefox heeft er geen problemen mee.

[ Voor 66% gewijzigd door TheNephilim op 08-01-2013 15:21 ]

[Erwin537]

Is het sowieso niet beter om een sprite van de afbeelding te maken en alleen de background position te veranderen?

[TheNephilim]

De standaard afbeelding (refresh.png) en zijn hover-state zitten in een sprite met z'n tweeën. Een gif gaat niet in een PNG passen.

Daarnaast is het wel netjes om de afbeelding in ieder geval te preloaden om een ladende afbeelding bij het klikken te voorkomen.

[BtM909]

Echter, de code komt netjes in de 'inline css' te staan, maar het blijft gewoon een leeg vlak.

In jouw voorbeeld gebruik je een volledige URI naar je plaatje. Doe je het in je eigen omgeving met relatieve paden? Heb je anders een mini-testcase in je eigen omgeving waar het fout gaat? Als je dat leeg vlak inspect, zie je dan wel het juiste pad?

[TheNephilim]

Nee ik gebruik het volledige pad, als ik die -zoals hij in de inline-css staat- kopieer en plak in m'n adresbalk in Chrome, krijg ik netjes de geanimeerde afbeelding te zien.

Nogmaals, de winkelwagen werkt in Firefox prima, maar in Chrome niet.

[ Voor 16% gewijzigd door TheNephilim op 08-01-2013 15:43 ]

[BtM909]

TheNephilim schreef op dinsdag 08 januari 2013 @ 14:58:

Conclusie, background-image wijzigen met een afbeelding van het huidige domein werkt niet in Chrome, Firefox heeft er geen problemen mee.

Maar ik heb nu een plaatje van JSFiddle gepakt en die werkt ook gewoon

Ik mis nog even waar je denkt te weten waarom het in JSFiddle wel werkt en niet in je eigen voorbeeld (heeft vast met die bug in Chrome te maken, maar zonder niet werkend voorbeeld kunnen we geen viable workaround verzinnen )

[TheNephilim]

Eeeeh, dus met afbeeldingen op hetzelfde domein in jsfiddle is er geen probleem? Ik kan niet vinden waar je afbeeldingen kunt uploaden bij jsfidddle.

Het werkte bij mij wel in jsfiddle, omdat de afbeelding die ik daar gebruikt heb, geupload is bij tweakers.net. Dus ik kwam tot die conclusie, omdat het in Firefox wel werkt met dezelfde code en in Chrome niet.

Ik weet waar je naartoe wil, maar ik kom er niet op.

[frG]

Is het niet makkelijker om gewoon 2 classes aan te maken, en vervolgens de class te veranderen bij een OnClick?

.addClass()
.removeClass()

http://jsfiddle.net/sEkKM/1/

[ Voor 22% gewijzigd door frG op 08-01-2013 16:16 ]

[Seikeau]

TheNephilim schreef op dinsdag 08 januari 2013 @ 15:43:
Nee ik gebruik het volledige pad, als ik die -zoals hij in de inline-css staat- kopieer en plak in m'n adresbalk in Chrome, krijg ik netjes de geanimeerde afbeelding te zien.

Nogmaals, de winkelwagen werkt in Firefox prima, maar in Chrome niet.

En als je klikt op de url in het resources paneel? Kan zijn dat er een / voor staat (of juist niet) wat het relatieve pad verneukt.

[BtM909]

TheNephilim schreef op dinsdag 08 januari 2013 @ 15:54:
Eeeeh, dus met afbeeldingen op hetzelfde domein in jsfiddle is er geen probleem? Ik kan niet vinden waar je afbeeldingen kunt uploaden bij jsfidddle.

Het werkte bij mij wel in jsfiddle, omdat de afbeelding die ik daar gebruikt heb, geupload is bij tweakers.net. Dus ik kwam tot die conclusie, omdat het in Firefox wel werkt met dezelfde code en in Chrome niet.

Gewoon een plaatje gepakt die ze gebruiken (zoals bijv. het plaatjes van de help linksonder )

Ik weet waar je naartoe wil, maar ik kom er niet op.

[R4gnax]

Zie: Chromium bugtracker - Issue 140221, comment 25

Mogelijk is dit, net als in het topic met het Youtube-in-iframe probleem, óók een bug in recente verbeteringen aan Chrome's compositor.

[TheNephilim]

BtM909 schreef op dinsdag 08 januari 2013 @ 16:52:
[...]

Gewoon een plaatje gepakt die ze gebruiken (zoals bijv. het plaatjes van de help linksonder )

[...]

Zoiets als dit bedoel je?

http://jsfiddle.net/TheNephilim/AbTPW/2/

Wat vervelend trouwens dat jsfiddle, de cursor staat soms op een hele andere plek als waar je typt Dan maar typen in notepad en copy-paste!