afbeelding zonder initial src geeft css background-image niet weer: url ("image.png");

Ik heb een tabel met dezelfde kleine afbeelding op elke rij.

Gezien de tabel duizenden rijen bevat, wil ik de src , breedte en hoogte van de afbeelding in html niet instellen en dit in plaats daarvan doen met CSS met een klasse .

.clbtn {
width: 18px; 
height: 18px;
background-image: url("image.png");
}

Als u dit doet, neemt de oorspronkelijke grootte van de pagina af.

Hoewel dit prima werkt in chroom, is het niet in firefox. Is er een andere manier om dit te doen dan een $ (document) .ready (function() {$ (". Clbtn"). Attr ("src", "image.png");}); na de tafel?

 1
toegevoegd
Bekeken: 2
de bron
waarom gebruik je img , gebruik dan een div met achtergrondafbeelding.
toegevoegd de auteur Furqan Hameedi, de bron
sorry, ik heb je niet begrepen, je hebt nooit een onclick -gebeurtenis genoemd voor de afbeelding of de functionaliteit ervan. kan je de vraag bijwerken?
toegevoegd de auteur Furqan Hameedi, de bron
Ik heb je suggestie geprobeerd maar op de een of andere manier is de onclick-gebeurtenis verknoeid en mist de nieuwe afbeelding na een klik enkele pixels onderaan. $ (this) .css ("background-image", "url (/images/image.png)"); is de aanklikgebeurtenis. Misschien mis ik iets voor de hand liggende?
toegevoegd de auteur Suzy, de bron
Het is prima. Ik blijf gewoon bij de jQuery-oplossing om dingen niet ingewikkeld te maken. Bedankt voor de suggestie tho =) Ik zal deze vraag hier houden voor het geval iemand in de komende 5 jaar hetzelfde probleem tegenkomt en niet denkt aan jQuery'ing a class = p
toegevoegd de auteur Suzy, de bron

1 antwoord

Dat komt omdat de browser afbeeldingen verwerkt met ontbrekende symbolen. Misschien wel het meest sensuele om te doen als je dit echt op deze manier moet doen, is om alle img te srcen met een 1x1 transparante gif.

0
toegevoegd
de bron
Niet echt dat zou ongeveer hetzelfde zijn, 2500 keer src = "a.gif" voegt 31,6 kB toe aan de HTML-paginagrootte: p
toegevoegd de auteur Suzy, de bron
Ik ben blij met mijn jQuery, het is niet erg elegant, maar tot nu toe is het de meest effectieve manier;)
toegevoegd de auteur Suzy, de bron