[jquery] Website hapert bij uitvoeren meerdere scripts

[Ronnyrr]

Hallo iedereen,

Voor een project ben ik op het moment een website aan het maken waarbij ik aardig wat jquery gebruik.
Ik heb een script om de achtergrond afbeelding van de website te veranderen. Dat script ziet er als volgt uit:

JavaScript:

function slideSwitch() {
    var $active = $('#slideshow IMG.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); 
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first'); 
 
    $active.addClass('last-active'); 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1500, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 15000 );
});

En ik gebruik ook nog een aantal andere jquery functions. Echter denk ik dat het grootste probleem van me website bij het script van de achtergrond ligt.

Want zodra de website een nieuwe achtergrond afbeelding inlaad en nog iets anders moet uitvoeren op de website, loopt mijn website gedeeltelijk vast. Zo maak in in mijn website ook gebruik van een toggle waarmee ik verschillende menu's in- en uit klap. Als de website op het punt staat een nieuwe achtergrond afbeelding in te laden en op dat moment toggle in ook een venster dan loopt de toggle en de overgang naar een nieuwe achtergrond afbeelding gedeeltelijk vast, oftewel het gaat heel langzaam.

Echter kan ik niet vinden waar dit aan ligt.

Ik heb al verschillende dingen geprobeerd waaronder verschillende jquery versie's. Ook had ik eerst alle jquery functions in 1 .js file staan. Dit heb ik veranderd en alles per onderdeel in een .js bestand gezet, maar ook dit lijkt niet te werken. Eerst leek mijn website vast te lopen doordat ik een plug-in, supersized, gebruikte om de achtergrond van de website te laten veranderen. Hiervoor heb ik nu een alternatief gezocht, echter loopt de website nog steeds vast als jquery op een moment meerdere scripts moet uitvoeren.

Hierop moet ik zeggen dat er wel één uitzondering is qua browsers en dat is bij mij Mozilla Firefox. De laatste versie van Firefox lijkt er bij mij namelijk geen moeite mee te hebben meerdere scripts tegelijkertijd uit te voeren. De rest van de browsers, allemaal laatste versie (Chrome, Safari en IE) hebben er zoals gezegt dus wel moeite mee en loopt jquery 'vast'.

Ook heb ik nog geprobeerd alle images uit de achtergrond slideshow te preloaden in de hoop het probleem te verhelpen.. Helaas wil ook dit niet werken en blijft de website vastlopen als die meerdere dingen moet uitvoeren als de achtergrond afbeeldingen ook veranderd worden..

Iemand enig idee hoe ik dit kan verhelpen of wat ik hieraan kan doen?

[Verwijderd]

*troll*

[ Voor 87% gewijzigd door MueR op 21-02-2012 01:56 ]

[Ronnyrr]

Mijn kennis van jquery is nog niet erg groot en daarom wist ik nog niet hoe ik de achergrond afbeelding van mijn website kon omzetten naar een slideshow. Daarom heb ik dat script van het internet gehaald.

[ Voor 31% gewijzigd door Ronnyrr op 15-02-2012 16:08 ]

[bartbh]

Als ik het goed heb, worden eerst alle afbeeldingen geladen. Dus als de achtergrondafbeelding wordt gewisseld, wordt deze niet daadwerkelijk geladen van de server.

Hoe groot zijn de afbeeldingen? Zowel in de zin van afmetingen als aantal KB's.

Heb je ook een test versie online staat? (jsfiddle) En heb je het geprobeerd met minder of kleinere afbeeldingen?

[Ronnyrr]

De afbeeldingen waren inderdaad veel groot, daar had ik totaal niet aan gedacht dat dat ook een fout kon wezen natuurlijk, ik was helemaal gericht op het jquery gedeelte en dacht dat daar de fout lag.

Heb nu de afbeeldingen wat verkleint en de website werkt prima.

Mijn dank daarvoor!

[Ronnyrr]

Ondertussen ben ik bij een volgend probleem gekomen van een trage website waar ik alleen in IE last van heb..
In IE gaan de prestatie's van de CPU enorm omhoog als de website opent.

Dit komt volgens mij omdat ik in de achtergrond slideshow gebruik maak van position:fixed.
Op het moment dat ik gebruik maak van position:absolute gaat het CPU verbruik weer naar een normale hoeveelheid, echter verspringt de achtergrond dan op een rare manier in hoogte en in breedte. Helaas heb ik hiervoor de oplossing nog niet kunnen achterhalen. Ik heb geen idee waarom de hoogte en breedte waarde's anders worden als ik absolute ipv fixed gebruik.

Zie hier hoe het is met fixed en hier hoe het is met absolute.

Om het CPU verbruik en dus de traagheid te verminderen vooral in IE (toch wel het meest gebruikt onder de doelgroep voor deze website schat ik zo) dus, zou ik dit graag wel willen veranderen.

Helaas heb ik, zoals gezegd, geen idee waar de fout ligt want de hoogte en breedte waarde veranderen op een of andere manier.

HTML:

<div id="slideshow">
    <img class="active" src="images/bg/koffie.jpg" alt="Koffie"/>
    <img src="images/bg/pionier.jpg" alt="Lunchroom de Pionier" />
    <img src="images/bg/pionier2.jpg" alt="Lunchroom de Pionier" />
    <img src="images/bg/pionier3.jpg" alt="Lunchroom de Pionier buitenkant" />
</div>  <!-- #slideshow -->

Hierboven is de HTML van de achtergrond afbeeldingen.
Hieronder volgt de CSS waar ik dus gebruik maak van position fixed:

Cascading Stylesheet:

#slideshow { position:relative; height:350px; z-index:-1;} 
#slideshow IMG.active { z-index:10; opacity:1.0;} 
#slideshow IMG.last-active { z-index:9;} 
#slideshow img { min-height:100%; min-width:1024px; width:100%; height:auto; position:fixed; top:0; left:0;}

Als ik bij de laatste regel dus position fixed veranderen in position absolute verspringt de hele achtergrond qua hoogte's en breedte's.

De jQuery code ziet er als volgt uit:

JavaScript:

function slideSwitch() {
    var $active = $('#slideshow IMG.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); 
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first'); 
 
    $active.addClass('last-active'); 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1500, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 15000 );
});

Echter zie ik in deze alle 3 geen reden waarom de hoogte en breedte volledig anders worden als ik gebruik maak van position absolute ipv fixed. Misschien iemand die hier het verband wel tussen ziet en mij hiermee verder kan helpen? Zou het erg op prijs stellen.

[bartbh]

Ik heb nu geen tijd om het helemaal door te spitten, maar kijk anders eens naar jquery en supersized? Doet deze niet wat jij wil bereiken, zonder het wiel opnieuw uit te vinden?

[MueR]

Je zou ook nog even kunnen proberen om contact te leggen met de maker van dit script? Over het algemeen geven we namelijk geen support op scripts van derden.

Ik ben momenteel geneigd het nog even door de vingers te zien aangezien je duidelijk de moeite wil nemen om je probleem helder en duidelijk te omschrijven en je bereidheid om zelf wat werk te verzetten. Wat dat betreft heb je onze adviezen ter harte genomen.

[alex3305]

Het verschil met fixed en absolute is dat fixed aan je scherm is gebonden, terwijl absolute gepositioneerd wordt waar je nu in je browser bevindt. Met andere woorden als je scrollt met absolute en toevallig verandert het plaatje dan, dan gaat het plaatje mis .

Echter denk ik dat je het geheel beter op een andere manier kan aanpakken. Nu laad je namelijk alle plaatjes en ga je daar doorheen cyclen. Deze plaatjes worden op de achtergrond al getekend, alleen zie je daar niets van door optimalisaties. Echter denk ik dat je dit veel beter kan doen door middel van een extern script. Meestal zijn deze scripts vrij uitontwikkeld en zijn beginners-bugs al lang gefixt.

Een voorbeeld, welke boven inderdaad al werd aangehaald, is Supersized. Zoals je kun zien werkt deze wel soepel in tegenstelling tot wat jij doet.

[Ronnyrr]

Ik heb het inderdaad geprobeerd met de plugin van Supersized zoals alex3305 aangaf in de post hierboven.
Het is wel duidelijk te zien dat hierdoor de website in IE beduidend soepeler loopt.

Het CPU gebruik komt bij het uitvoeren van de scripts nog wel boven de 30% uit, maar het geeft bij mij geen problemen in de website. Ook op een verouderde laptop, die ik hier nog in huis had, loopt de website in IE aardig soepel.

MueR schreef op dinsdag 21 februari 2012 @ 02:01:
Over het algemeen geven we namelijk geen support op scripts van derden.

Sorry hiervoor, hiervan was ik niet op de hoogte.
Van het andere wel. Zelf vind ik het sowieso ook fijn om zelf dingen te kunnen oplossen dan dat iemand me alles voorkauwt. Hier leer ik allemaal maar weer van.

Trouwens nog bedankt voor de reactie en het door de vingers zien van mijn fout. De volgende keer zal ik geen hulp meer vragen met scripts van derden. Hoewel ik ook moet zeggen dat ik normaal gesproken zelf zoveel mogelijk probeer te scripten waardoor jullie mij nog wel eens vaker zullen zien op dit forum gedeelte.

bartbh schreef op maandag 20 februari 2012 @ 23:11:
Ik heb nu geen tijd om het helemaal door te spitten, maar kijk anders eens naar jquery en supersized? Doet deze niet wat jij wil bereiken, zonder het wiel opnieuw uit te vinden?

Wat betreft dit snapte ik niet helemaal wat je bedoelde. Echter is zoals ik dus al aangaf in deze post het probleem opgelost met Supersized, wat ik in eerste instantie ook helemaal niet gebruikte waardoor ik niet snapte je dat in je post aanhaalde. Desondanks bedankt voor je reactie!

alex3305 schreef op dinsdag 21 februari 2012 @ 02:21:
Het verschil met fixed en absolute is dat fixed aan je scherm is gebonden, terwijl absolute gepositioneerd wordt waar je nu in je browser bevindt. Met andere woorden als je scrollt met absolute en toevallig verandert het plaatje dan, dan gaat het plaatje mis .

Bedankt voor je reactie, ook hiervan was ik niet op de hoogte. Zo heb ik weer wat geleerd. Ik probeer normaal gesproken met CSS het gebruik van position's zoveel mogelijk te vermijden (indien natuurlijk onmogelijk) en gebruik ik het liefst floats. Dit vind ik persoonlijk altijd fijner werken, al moet ik zeggen dat ik mezelf ook nooit erg verdiept had in position's.

[bartbh]

Ronnyrr schreef op dinsdag 21 februari 2012 @ 22:51:
[...]

Wat betreft dit snapte ik niet helemaal wat je bedoelde. Echter is zoals ik dus al aangaf in deze post het probleem opgelost met Supersized, wat ik in eerste instantie ook helemaal niet gebruikte waardoor ik niet snapte je dat in je post aanhaalde. Desondanks bedankt voor je reactie!

Bedoelde dus inderdaad dat je ff moest kijken naar supersized, maar dat is uiteindelijk gelukt

[alex3305]

En nu dus aan de slag met de broncode van Supersized om te kijken wat hun wel goed doen en jij niet deed . Wat ik in ieder geval snel even heb gezien is dat ze bij Supersized de image resizen naar de browsergrootte. Het voordeel hiervan lijkt me dat deze niet getekend hoeft te worden en dus waarschijnlijk ook niet gecached wordt door de browser.