Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JavaScript] Hoe een andere image indien geen JS? (of wel)

Buur
8 antwoorden
  • Vraag me niet waarom, maar ik wil het volgende bereiken:
    Een pagina heeft een header-image. Bijvoorbeeld header1.jpg

    Als de browser waarmee de pagina wordt bekeken JavaScript ondersteunt en aan heeft staan, wil ik een andere header-image. Bijvoorbeeld header2.jpg

    Dit is niet zo moelijk, bijvoorbeeld door standaard header1 te laten zien en deze dan door JavaScript met header2 te overschrijven (Staat JS niet aan, dan verandert er gewoon niks en heb je header1). Het nadeel is echter dat in deze situatie zowel header1 als header2 worden ingeladen! Aangezien beide headers plusminus 50kb zijn, vind ik dat nogal te veel van het goede.

    Iemand een oplossing?
  • Kun je de afbeelding ook als achtergrond gebruiken? Dan kun je het volgens mij via CSS oplossen. Je geeft de header een standaard class of ID die header1.jpg laadt. En javascript laat je deze standaard class/ID bij voorbaat verwijderen en vervangen voor een andere met header2.jpg als achtergrond.
    (Of ging dat nou alleen met jQuery? Nou ja, ik heb dit verhaal net getypt dus ik laat het maar staan ;-))
  • Ja het mag in de achtergrond.

    Dus dan zoiets in de HTML
    <div id="header"></div>

    In de css zoiets
    #header { background-image: header1.jpg; }

    En vervolgens met JavaScript:
    document.getElementById("header";).style.background-image = "header2.jpg";

    Is dat het idee? Ik moet nu helaas weg dus kan het niet meteen proberen, maar als ik dit probeer te visualiseren worden de headers alsnog beide ingeladen. Of niet?
  • Dan worden inderdaad beide headers geladen. Ik denk ook niet dat je daar onderuit komt als je het puur client side wil testen; je bent dan afhankelijk van javascript als je conditionele structuren hebt. En als javascript er niet is, moet je een fallback hebben. Kom je dus toch weer uit op een standaard + een als js actief is.

    Je kun misschien wel gebruik maken van PHP met de get_browser() functie. Die functie schijnt wel weer redelijk vertragend te werken, dus het wordt aanbevolen het resultaat te cachen. Of je daar dus écht iets mee opschiet qua optimalisatie is een tweede.

    Misschien is de beste optie nog wel: maak van die 2 afbeeldingen 1 afbeelding. Laat via CSS standaard header1 zien, en schuif met javascript de afbeelding op. Eigenlijk dus gewoon een CSS sprite, alleen dan met een klein stukje JS.
  • Zo kan het waarschijnlijk ook wel, al vraag ik me af of dat de originele achtergrond dan toch niet geladen wordt.

    Ik heb het nu even nagekeken, maar wat ik in mijn hoofd had gebeurt met jQuery en dat is volgens mij ook alweer over de 80 KB :-(

    Anyway, wat ik in mijn hoofd had gaat uit van een div met het ID "header" en twee classen, .header1 en .header2. classe header1 zet je standaard in de HTML dus:
    [code:1:2d0e589f2a]<div id="header" class="header1">[/code:1:2d0e589f2a]
    En dan gooi je bovenaan in je code (dus nog voor de header div):

    [code:1:2d0e589f2a] $(document).ready(function(){
    $("div#header").removeClass("header1").addClass("header2");
    });[/code:1:2d0e589f2a]
    [edit]
    Ah, Ger heeft ook al gereageerd terwijl ik ijverig zat te typen :-)
    [/edit]
  • Maar is het erg dat hij dan beiden headers inlaad? Het is toch gewoon consistent: Immers : headers worden ingeladen, geen javascript dan geen trucje, anders wel trucje.

    Als krijg je een situatie als : Als ik me js disable, dan laad de website sneller. Ik heb toch het liefste dat mensen hun js aan hebben ;)
  • Heb je de noscript tag geprobeerd?:
    [code:1:c040244dbb]<script type="text/javascript">
    document.write('<img src="script.png" alt="">');
    </script>
    <noscript>
    <img src="noscript.png" alt="">
    </noscript>[/code:1:c040244dbb]
    wimb
  • Kan je niet gewoon simpel het volgende doen:
    <div id="header"><noscript><img src="header1.jpg" alt=""/></noscript></div>
    <script type="text/javascript">
    document.getElementById("header";).innerHTML = '<img src="header2.jpg" alt=""/>';
    </script>

    Ik verzin het ook maar even snel maar dit lijkt mij het meest logisch…

    EDIT: Sorry, te snel gelezen, iemand anders was me al voor.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.